Here are a few question-based titles that fit your article: * Why is window.innerHeight 20px smaller than window.outerHeight in iOS 7 iPad Safari landscape mode, and how can I fix it? * How to Resolv

iOS 7 iPad Safari Landscape Inconsistent Height Reporting: Resolving the Issue

In iOS 7 iPad Safari landscape mode, a peculiar discrepancy arises between window.innerHeight and window.outerHeight, with a 20px difference. This issue impacts web apps with 100% height, leading to unexpected behavior.

To address this, a solution emerged involving the adjustment of the body's positioning:

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

This code conditionally fixes the body's position to ensure its height aligns with window.innerHeight. Additionally, a script was employed to detect iPad devices running iOS 7, dynamically adding CSS classes to the element for targeted styling:

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

By implementing these modifications, the issue was resolved, allowing web apps to accurately calculate their height and avoid the 20px discrepancy in iOS 7 iPad Safari landscape mode.

The above is the detailed content of Here are a few question-based titles that fit your article: * Why is window.innerHeight 20px smaller than window.outerHeight in iOS 7 iPad Safari landscape mode, and how can I fix it? * How to Resolv. For more information, please follow other related articles on the PHP Chinese website!