다음은 내용을 요약하는 몇 가지 질문 기반 기사 제목입니다. 직접적이고 유익한 정보: * iOS 7 iPad 가로 모드의 window.innerHeight가 window.outerHeight와 다른 이유는 무엇입니까? * 어떻게

iOS 7 iPad Safari 가로 레이아웃 불일치

iOS 7 iPad를 가로 모드로 사용할 때 웹 앱에서 창에 이상한 문제가 발생합니다. .innerHeight 및 window.outerHeight가 정렬되지 않습니다. 이 20px 차이로 인해 탐색 요소가 가려지고 화면 하단의 절대 위치가 잘못 정렬됩니다.

이 문제를 해결하고 사용자 환경을 방해하지 않도록 하려면 해결 방법을 구현할 수 있습니다. iOS 7에서 본문 요소를 특별히 위치 지정함으로써:

body {
    position: absolute;
    bottom: 0;
    height: 672px !important;
}

안타깝게도 이 접근 방식은 추가 공간을 해결하는 대신 단순히 페이지 상단으로 이동합니다. 효과적인 것으로 입증된 대체 솔루션은 위치를 고정으로 수정하는 것입니다:

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

또한 스크립트를 사용하여 iOS 7을 실행하는 iPad 장치를 감지할 수 있습니다:

if (navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i)) {
    $('html').addClass('ipad ios7');
}

위 내용은 다음은 내용을 요약하는 몇 가지 질문 기반 기사 제목입니다. 직접적이고 유익한 정보: * iOS 7 iPad 가로 모드의 window.innerHeight가 window.outerHeight와 다른 이유는 무엇입니까? * 어떻게의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!