Why is There a 20px Height Discrepancy in iOS 7 Safari for iPad\'s Landscape Mode?

iOS 7 Safari Landscape Layout Discrepancy: innerHeight vs. outerHeight

In iOS 7 Safari for iPad, a peculiar issue arises with web apps that utilize 100% height. The window.innerHeight (672px) and window.outerHeight (692px) values diverge solely in landscape mode. This discrepancy results in an extra 20px of unused space, affecting the layout of navigation elements and absolutely positioned elements at the screen's bottom.

To mitigate this problem until Apple addresses it, developers have resorted to workarounds. One approach involved absolutely positioning the body in iOS 7, effectively shifting the 20px gap to the page's top instead of the bottom. However, a more effective solution has emerged.

By setting the body's positioning to fixed, the issue can be circumvented:

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

To identify iPad devices running iOS 7, the following script can be employed:

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

By implementing this workaround, developers can ensure proper layout behavior in iOS 7 Safari for iPad, eliminating the troublesome height discrepancy and its impact on navigation and positioning.

The above is the detailed content of Why is There a 20px Height Discrepancy in iOS 7 Safari for iPad\'s Landscape Mode?. For more information, please follow other related articles on the PHP Chinese website!