Home > Article > Web Front-end > 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!