iOS 7 Safari 가로 모드의 window.innerHeight가 window.outerHeight와 다른 이유는 무엇입니까?

iOS 7 iPad Safari 가로 레이아웃 버그: 내부 높이/외부 높이 불일치

iOS 7 Safari에서 신체 높이가 100%인 웹 애플리케이션 가로 모드에서 특이한 문제가 발생합니다. window.innerHeight(672px)는 window.outerHeight(692px)와 다릅니다.

이러한 불일치로 인해 볼 수 있는 영역 아래에 20px의 추가 공간이 생겨 위로 스와이프하면 탐색 요소가 브라우저 크롬 뒤에 숨겨집니다. . 화면 하단에 절대 위치에 있는 요소도 20px 떨어져 표시됩니다.

해결 방법

이 버그를 완화하려면 본문 높이를 명시적으로 설정하는 CSS 핵을 적용할 수 있습니다. 672px로 설정하고 iOS 7에서만 위치를 지정합니다.

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

iOS 7을 실행하는 iPad 장치를 식별하려면 다음 스크립트를 사용합니다.

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

이 해결 방법을 적용하면 externalHeight가 iOS 7 Safari 가로 모드에서 앱의 레이아웃이 의도한 대로 작동하도록 하려면 innerHeight와 일치해야 합니다.

위 내용은 iOS 7 Safari 가로 모드의 window.innerHeight가 window.outerHeight와 다른 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!