iPad Safari 가로 모드가 iOS 7에서 내부 높이/외부 높이 불일치를 나타내는 이유는 무엇입니까?

iOS 7 iPad Safari 가로 레이아웃 수수께끼: innerHeight/outerHeight 이상 ​​극복

iOS 7 사용자는 iPad의 웹 앱에서 특이한 수수께끼에 직면합니다. Safari 가로 모드의 iPad. window.innerHeight(672px)는 window.outerHeight(692px)와 다르므로 하단에 20px의 추가 공간이 생기는 등 예상치 못한 레이아웃 문제가 발생합니다. 이 문제는 웹 콘텐츠의 높이를 100% 활용하는 앱에 문제를 제기합니다.

레이아웃 미로 탐색

이 문제를 해결하기 위해 다양한 솔루션이 등장했습니다. 한 가지 접근 방식은 iOS 7에서만 본문 요소의 위치를 ​​절대적으로 지정하는 것입니다.

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

그러나 이 접근 방식은 추가 공간을 제거하는 것이 아니라 페이지 상단으로 이동하는 것뿐입니다.

확고한 기반 찾기: 고정 위치 지정 및 사용자 에이전트 감지

보다 강력한 솔루션은 미디어 쿼리를 활용하여 iPad iOS 7 세션 중에만 본문 요소에 고정 위치 지정을 적용하고 100% 안정적인 레이아웃을 위한 너비:

<code class="css">@media (orientation:landscape) {
    html.ipad.ios7 > body {
        position: fixed;
        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>

이러한 기술을 사용하여 , 웹 앱은 iOS 7 iPad Safari의 innerHeight/outerHeight 불일치를 효과적으로 중화하고 세로 및 가로 방향 모두에서 일관되고 세련된 탐색 경험을 제공할 수 있습니다.

위 내용은 iPad Safari 가로 모드가 iOS 7에서 내부 높이/외부 높이 불일치를 나타내는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!