I have a web app that I'm trying to run on an iPad 3. When I pull it up, the app is allowing vertical scroll when it shouldn't be. I've gone through the same process with other web apps without any issues, and am not sure what I am missing this time around.
Inside head element of my html, I have the following meta tags:
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi">
<meta name="apple-mobile-web-app-capable" content="yes">
In my CSS:
html, body { width: 100%; height: 100%; overflow: hidden; }
Trying to debug this issue in weinre and discovered that the document width and height are somehow equal, when height show be much smaller (in landscape).
$(document).width(); // returns 1024
$(document).height(); // returns 1024
Searching around SO, other answers have been to supply a viewport meta tag, which I'm already doing. Can someone point me to a solution here?
overflow:hidden!important;
?