메타 뷰포트 및 Android 문제

JQuery를 기반으로 일반 자바 스크립트 대화 클래스를 만들어 화면 중앙에 div-popups를 만들려고합니다. 모든 일반적인 브라우저에서이를 달성하는 것은 평범한 바닐라였습니다.

모바일 플랫폼의 경우 뷰포트 문제가 발생합니다. 표시되는 뷰포트 (확대 여부에 관계없이 사이트의 현재 "보기 창")와 레이아웃 뷰포트 (기본 페이지 또는 즉, CSS 뷰포트의 크기)의 차이

Iphone의 경우 DOM 속성 window.innerWidth 및 window.innerHeight를 사용하여 크기 조정의 중심을 조정하고 pageXOffset / pageYOffset을 사용하여 패닝을 조정할 수 있습니다. 다음을 사용하여 대화 상자의 위치를 ​​지정합니다. x와 y에 각각 왼쪽 / 위에 있습니다. 이것은 대부분의 브라우저와 아이폰에서도 잘 작동하지만, 안드로이드 플랫폼에서는 작동하지 않습니다.

Google을 사용하여 과도한 조사를 한 결과, 안드로이드는 window.innerWidth 및 window.innerHeight 속성에 상당한 문제가있는 것 같습니다. 예를 들어 http://www.quirksmode.org/mobile/viewports2.html , "Measuring the visible viewport"를 검색하십시오). 옵션은 Android 브라우저를 식별하고 항상 표시되는 뷰포트에서 항상 상단 / 왼쪽에 배치되는 window.pageXOffset / window.pageYOffset에 대화 상자를 배치하기 위해 사용자 에이전트를 사용하는 것입니다. 그러나 이것은 여러 가지 이유로 나쁜 옵션이며, 특히 축소했을 때 좋지 않게 보입니다. 안드로이드에서 보이는 뷰포트를 계산하는 방법을 아는 사람이 있습니까? 아니면이 문제에 대한 해결 방법을 찾은 사람이 있습니까?