Problem z rzutnią meta i Androidem

Question

Próbuję utworzyć ogólną klasę dialogową javascript opartą na JQuery, aby utworzyć wyskakujące okna wyśrodkowane na ekranie. Osiągnięcie tego we wszystkich popularnych przeglądarkach było proste.

W przypadku platform mobilnych pojawia się kwestia widoczności; różnica widocznej widocznej strony (która jest twoim aktualnym "oknem oglądania" witryny, tak jak ją widzisz, powiększona lub nie) i rzutnią układu (wymiary strony podstawowej lub innymi słowy rzutnia CSS).

dla iPhone, byłem w stanie wykorzystać właściwość DOM window.innerWidth i window.innerHeight dostosować centrowania dla skalowania i pageXOffset/pageYOffset dostosować do panoramowania, ze:

// 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 wtedy ustaw moje okno dialogowe, ustawiając odpowiednio lewy/górny na x i y. Działa to dobrze w większości przeglądarek, a nawet Iphone, jednak nie działa na platformach Android.

Po wykonaniu nadmiernych badań za pomocą Google wydaje się, że Android ma pewne problemy z właściwościami window.innerWidth i window.innerHeight (patrz np. http://www.quirksmode.org/mobile/viewports2.html, wyszukaj "Pomiar widocznej widoczności").

Opcją jest użycie useragenta w celu zidentyfikowania przeglądarek systemu Android i zawsze umieszczenie okna dialogowego w window.pageXOffset/window.pageYOffset, które zawsze ustawi je w górnym/lewym rogu w widocznej rzutni. Jednak jest to zła opcja z wielu powodów, nie tylko dlatego, że wygląda źle podczas pomniejszania.

Czy ktoś wie metody obliczania widocznej widocznej na Androida? A może ktoś znalazł obejście tego problemu?

Answer 1

Odpowiedź wydaje się polegać na tym, że musisz ustawić szerokość rzutni na szerokość urządzenia. Wygląda na to, że działa we wszystkich testowanych wersjach Androida (2.1, 2.2 i 2.3).

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

Answer 2

ja pisał sporo części moich badań nad chorobami związanymi z rzutni/szerokość emisyjnej tutaj, które mogą Ci pomóc ... Web app on android browser WIDTH issue

Answer 3

To stara sprawa, ale nie mogę znaleźć dobra odpowiedź na to pytanie ... Więc po kilku pracach nad kilkoma urządzeniami z Androidem, znalazłem świetne rozwiązanie (hack) do problemu z Androidem. Spróbuj tego:

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

LUB

// 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(" "); 

Następnie chwycić rozmiar tego elementu

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

Answer 4

mam wymyślić slighly innego podejścia, które powinny pracować na poprzecznych platformy

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

odpowiedział również na to pytanie ...

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