메타 뷰포트 태그 및 장치 방향

Question

나는

<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no"> 

내 응용 프로그램이 절대적으로 0 0 0 0에 위치한다 ...이 메타 태그를 얻고, 내부의 모든 스크롤했습니다. 두 개의 고정 된 막대, 머리글과 바닥 글이 있으므로 콘텐츠 높이를 포함하는 것이 중요합니다.

이제 사용자가 장치 방향을 변경한다고 생각하십시오. 콘텐츠의 높이가 이제 기기의 너비이지만 메타 태그는 변경되지 않습니다. 이제 내 바닥 글 막대가 보이지 않습니다.

무엇을할까요?

Answer 1

JavaScript를 통해 수동으로 크기를 변경해야합니다 (orientationchange). 자세한 내용은 Mobile Safari device-width/height orientationchange bug을 참조하십시오.

이 블로그 게시물에서이다 : 그 선택의 라이브러리의 경우

이

window.addEventListener('orientationchange', function() { 
    document.querySelector('html').style.width = window.innerWidth + 'px' 
}, false) 

위의 링크도의 jQuery 버전이 포함되어 있습니다.