메타 뷰포트 및 Android 관련 문제

Question

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

모바일 플랫폼의 경우 뷰포트 문제가 발생합니다. 표시되는 뷰포트 (보기의 현재 "보기 창"), 확대/축소 된 뷰포트 및 레이아웃 뷰포트 (기본 페이지의 크기 또는 CSS 뷰포트)의 차이.

는 아이폰, 나는 스케일링을 중심으로 조정하기 위해 DOM 속성 window.innerWidth 및 window.innerHeight를 사용할 수있게되었습니다 및 pageXOffset/pageYOffset로, 패닝 조정하려면 다음

// Get dialog width/height 
var dx = $("#dialog").width(); 
var dy = $("#dialog").height(); 

// Get window (layout viewport) width/height 
var winW = $(window).width(); 
var winH = $(window).height(); 

if (window.innerWidth!=winW) { 
    // Zoomed in or users browser window width is smaller than layout width 
    var x = window.pageXOffset+(window.innerWidth-dx)/2; 
} else { 
    // Not zoomed in 
    var x = window.pageXOffset+(winW-dx)/2; 
} 

if (window.innerHeight!=winH) { 
    // Zoomed in or users browser window height is smaller than layout height 
    var y = window.pageYOffset+(window.innerHeight-dy)/2; 
} else { 
    // Not zoomed in 
    var y = window.pageYOffset+(winH-dy)/2; 
} 

I 왼쪽/위를 각각 x와 y로 설정하여 대화 상자를 배치하십시오. 이것은 대부분의 브라우저와 아이폰에서 잘 작동하지만 안드로이드 플랫폼에서는 작동하지 않습니다.

Google을 사용하여 과도한 조사를 한 후에 Android는 window.innerWidth 및 window.innerHeight 속성에 상당히 문제가있는 것 같습니다 (예 : http://www.quirksmode.org/mobile/viewports2.html, "눈에 보이는 뷰포트 측정"참조).

옵션은 Android 브라우저를 식별하고 window.pageXOffset/window.pageYOffset에 항상 대화 상자를 배치하여 보이지 않는 뷰포트에서 항상 위/왼쪽에 배치합니다. 그러나 이것은 여러 가지 이유로 좋지 않은 옵션입니다.

안드로이드에서 볼 수있는 뷰포트를 계산하는 방법을 알고있는 사람이 있습니까? 아니면 누군가가 이것에 대한 해결책을 찾았습니까?

Answer 1

대답은 장치 너비로 뷰포트 너비를 설정해야하는 것으로 보입니다. 그것은 테스트 한 모든 안드로이드 버전에서 작동하는 것으로 보입니다 (2.1, 2.2 및 2.3).

<meta name="viewport" content="width=device-width"> 

Answer 2

나는 ... 관련 뷰포트 당신에게 도움이 될 수 있습니다 여기에/폭 문제에 대한 내 연구의 공정한 조금을 게시 한 Web app on android browser WIDTH issue

Answer 3

이 오래된 질문이다,하지만 난 찾을 수 없습니다 이것에 대한 좋은 대답은 ... 그래서 안드로이드 장치의 무리에 대한 작업의 무리 후에 나는 안드로이드 문제에 큰 솔루션 (해킹)을 찾은 것 같아요. 이 시도 :

<!--HTML VERSION --> 
<div id="sojernTest" style="position:absolute; top:0;bottom:0;left:0;right:0;display:none;"></div> 

또는

// JAVASCRIPT WITH CSS CLASS 
var div = document.createElement('div'); 
div.id = "screenSizeHolder"; 
div.className = "screen_size_holder"; 
document.body.insertBefore(div, document.body.firstChild); 

$('#screenSizeHolder').html(" "); 

그런 다음 크로스 플랫폼에서 작동한다 나는가 두드러 다른 접근 방식을 마련했다

screenHeight = parseInt($('#screenSizeHolder').css('height').replace('px','')); 
screenWidth = parseInt($('#screenSizeHolder').css('width').replace('px','')); 

Answer 4

해당 요소의 크기를 잡아

http://www.jqui.net/tips-tricks/fixing-the-auto-scale-on-mobile-devices/

또한

How to set viewport meta for iPhone that handles rotation properly?