iOS UIWebView window width and height on iPad

Question

So I'm creating a full screen ad that runs inside a UIWebView in an unnamed app. Basically, I can't modify the viewport metatag at all, so my app needs to be exact 1023x767 to be full screen and wont scroll around the webview. It works 95% of the time, except one scenario that triggers a weird bug. If I start in landscape, then rotate to horizontal, I'm able to scroll the app around the webview as if it is larger than the viewport.

In the CSS, I have:

@media only screen and (orientation: portrait) {
    html, body {
        width: 767px;
        height: 1023px;
        overflow:hidden;
        position:relative;
    }
}

@media only screen and (orientation:landscape) {
    html, body {
        width: 1023px;
        height: 767px;
        overflow:hidden;
        position:relative;
    }
}

I am detecting events on orientation change, and I'm getting:

$('html').width() = 767
$('html').height() = 1023
$('body').width() = 767
$('body').height() = 1023

However, I found out I'm also getting this at the same time, which is obviously the problem, but I can't figure out why or how to fix it:

$(window).width() = 1023
$(window).height() = 1365

Any thoughts? Anyone!? :-)

Answer 1

So, through more research, the reason I wasn't able to use the veiwport metatag to establish width=device-width is because the viewport is actually set 1px smaller than the device width. Then, you'd have scrolling in the viewport in that dead pixel area. The app detects left and right swipes to change between different webviews, so you can't perform a "e.preventDefault()" to disable scrolling, and having it stuck in that 1px of scrolling screws up the swiping functionality in the app.

Long story short, I was able to do:

viewport=(device-width-1) and it fixed the issue. The app people didn't know this was possible, and I wasn't even sure something like this was possible, but it made it so the swiping could still occur because you weren't getting stuck in that deadspace.