Why Does iPad Safari Landscape Mode Exhibit an innerHeight/outerHeight Discrepancy in iOS 7?

iOS 7 iPad Safari Landscape Layout Conundrum: Overcoming the innerHeight/outerHeight Anomaly

iOS 7 users encounter an unusual conundrum with web apps on the iPad in Safari's landscape mode. The window.innerHeight (672px) differs from window.outerHeight (692px), leading to unexpected layout issues, such as 20px of extra space at the bottom. This issue poses a challenge for apps that utilize 100% height for their web content.

Navigating the Layout Maze

To address this issue, various solutions have emerged. One approach involves absolutely positioning the body element only in iOS 7:

<code class="css">body {
    position: absolute;
    bottom: 0;
    height: 672px !important;
}</code>

However, this approach merely shifts the extra space to the top of the page rather than eliminating it.

Finding a Firm Footing: Fixed Positioning and User Agent Detection

A more robust solution lies in utilizing a media query to apply fixed positioning to the body element only during iPad iOS 7 sessions and ensuring a 100% width for reliable layout:

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

To determine whether a user is browsing on an iPad with iOS 7, implement a script to detect the user agent:

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

By employing these techniques, web apps can effectively neutralize the innerHeight/outerHeight discrepancy in iOS 7 iPad Safari and deliver a consistent and polished browsing experience in both portrait and landscape orientations.

The above is the detailed content of Why Does iPad Safari Landscape Mode Exhibit an innerHeight/outerHeight Discrepancy in iOS 7?. For more information, please follow other related articles on the PHP Chinese website!