Why is window.innerHeight Different from window.outerHeight in iOS 7 Safari Landscape Mode?

iOS 7 iPad Safari Landscape Layout Bug: InnerHeight/OuterHeight Disparity

In iOS 7 Safari, web applications with a body height of 100% experience a peculiar issue in landscape mode. The window.innerHeight (672px) differs from the window.outerHeight (692px).

This discrepancy leads to an additional 20px of space below the viewable area, causing navigation elements to be hidden behind the browser chrome upon swiping up. Absolutely positioned elements at the bottom of the screen also appear 20px off.

Workaround

To mitigate this bug, you can apply a CSS hack that explicitly sets the body's height to 672px and positions it absolutely only in iOS 7:

<code class="css">@media (orientation:landscape) {
    html.ipad.ios7 > body {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 672px !important;
    }
}</code>

To identify iPad devices running iOS 7, use the following script:

<code class="javascript">if (navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i)) {
    $('html').addClass('ipad ios7');
}</code>

By applying this workaround, the outerHeight will be forced to match the innerHeight, ensuring that your app's layout behaves as intended in iOS 7 Safari landscape mode.

The above is the detailed content of Why is window.innerHeight Different from window.outerHeight in iOS 7 Safari Landscape Mode?. For more information, please follow other related articles on the PHP Chinese website!