I'm working on a specific web layout for multiple devices and browsers (desktop and mobile). I want the web app to be full-screen all the time, with no scrolling in either direction.
I'm using JavaScript to read the available height and width of the screen (document.documentElement.clientWidth, clientHeight), then setting my elements to fit. In my simple test case, I've got an absolute positioned div tag (top:0; left:0;) with width and height set (via JavaScript) to 4 pixels less than the screen width and height, with a 2px wide border on all 4 sides.
On desktop browsers and Chrome on a couple of Android devices it works as intended - I see the border at the edges all the way around and no scrolling.
On an iPad 2 and an iPad Mini (Safari), however, the resulting div is the correct width but 20 pixels too tall - I've got to scroll a bit to see the bottom border.
I get the same results when I do it with just CSS, using:
#borderDiv {
position:absolute; top:0; left:0; right:0; bottom:0;
border:2px solid black;
}
I'm using: <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
Why am I getting a "wrong" height result on iPad devices?
David
