I’m trying to do a web page for an iPad with Safari but whatever I do with the sizing, the page is always a few pixels bigger taller than the view port and so can be scrolled to hide the top few pixels of the page.
Has anyone got any suggestions about how to prevent this?
The page displays with no scrolling on the desktop browser.
Thanks in advance.
Are you changing the viewport size? I don’t see this problem with the Eddie’s Electronics web sample app. This is its code in Session.PrepareSession:
[code] Select Case Me.Platform
// Allow iPhone 5 to scale web app to use entire screen height when
// it is added to the home screen
// The “apple-mobile-web-app-status-bar-style” ensures that the
// status bar remains visible
HTMLHeader = “<meta name=”“viewport”" content="“initial-scale=1.0"” />" + _
EndOfLine + “<meta name=”“apple-mobile-web-app-status-bar-style”" content="“black”" />"
// Force the viewport to be exactly 1012 wide when the user connects with an iPad
HTMLHeader = “<meta name=”“viewport”" content="“width=1012"”>"
Go to the sample app, put your finger on the city label and drag up! You’ll notice that the page scrolls up a few pixels and half of the tool bar is no longer visible.
I think I’ve seen something similar with all touch browsers when I have a container on a page. Tapping inside the container doesn’t let the page scroll. So if I need the page to scroll, I’d leave a gutter area. But my designs of late just fit themselves to the screen and don’t need page scrolling.