Menu
I am building a phonegap app for ios and have vertical scroll issue. There appears to be a few pixels scroll in the webview even without any content and this is affecting my absolutely positioned nav bar and tab bar built in html
Here is the html page I have - there is no content by I still get the scroll amount shown in the image:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<title>My App</title>
</head>
<body>
<script src="scripts/vendor/cordova-2.4.0.js"></script>
</body>
</html>
scroll screenshot http://img20.imageshack.us/img20/5140/screenshot20130225at212.png
741
html, body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
<meta name="viewport" content="user-scalable=no, initial-scale=1, minimum-scale=1, width=device-width" />
And in config.xml:
<preference name="DisallowOverscroll" value="true" />
Above are settings I found to be the best start for handling scroll on iOS. Then, just add 'overflow: auto' to any element you need to scroll. Use overthrow or iscroll to help support iOS < 5, android < 3, and and so on.
160
This solved it for me (on iOS at least - may have other compatibility things on other platforms)
Try removing width=device-width, height=device-height from your meta at the top.
It's an issue with the device not factoring for the status bar at the top as far as I can tell.
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
