iOS 7 Safari 가로 레이아웃 불일치: 내부 높이 대 외부 높이

iPad용 iOS 7 Safari에서는 웹 앱에서 다음과 같은 독특한 문제가 발생합니다. 높이를 100% 활용합니다. window.innerHeight(672px) 및 window.outerHeight(692px) 값은 가로 모드에서만 분기됩니다. 이러한 불일치로 인해 사용되지 않는 공간이 20px 추가되어 탐색 요소의 레이아웃과 화면 하단의 절대 위치에 있는 요소에 영향을 미칩니다.

Apple이 이 문제를 해결할 때까지 이 문제를 완화하기 위해 개발자는 해결 방법을 사용했습니다. 한 가지 접근 방식은 iOS 7에서 본문 위치를 절대적으로 지정하여 20px 간격을 페이지 하단이 아닌 상단으로 효과적으로 이동하는 것이었습니다. 그러나 보다 효과적인 솔루션이 등장했습니다.

신체 위치를 고정으로 설정하면 문제를 피할 수 있습니다.

@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');
}

이 해결 방법을 구현함으로써 개발자는 iPad용 iOS 7 Safari에서 적절한 레이아웃 동작을 보장하여 문제가 되는 높이 불일치와 탐색 및 위치 지정에 미치는 영향을 제거할 수 있습니다.