Problema con meta viewport y Android

Question

Estoy tratando de crear una clase de diálogo de JavaScript genérica basada en JQuery para crear div-popups centradas en la pantalla. Lograr esto en todos los buscadores comunes era simple vainilla.

Para plataformas móviles, surge la cuestión de la ventana gráfica; la diferencia de la ventana gráfica visible (que es su "ventana de visualización" actual del sitio como la ve, la amplió o no) y la ventana gráfica de presentación (las dimensiones de la página subyacente, o en otras palabras, la ventana CSS).

para Iphone, que han sido capaces de utilizar la propiedad DOM window.innerWidth y window.innerHeight para ajustar el centrado de la escala, y pageXOffset/pageYOffset ajustar para la expansión, con:

// 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; 
} 

que entonces coloque mi diálogo configurando izquierda/arriba a xey respectivamente. Esto funciona bien en la mayoría de los navegadores e incluso en el Iphone, pero no funciona en las plataformas Android.

Después de investigar un poco con Google, parece que Android tiene bastantes problemas con las propiedades window.innerWidth y window.innerHeight (ver f eg http://www.quirksmode.org/mobile/viewports2.html, buscar "Medir la ventana visible").

Una opción sería usar el agente de uso para identificar los navegadores de Android y colocar siempre el cuadro de diálogo en window.pageXOffset/window.pageYOffset, que siempre los ubicaría arriba/izquierda en la ventana visible. Sin embargo, esta es una mala opción por muchas razones, entre otras cosas porque se ve mal cuando se aleja.

¿Alguien sabe de un método para calcular la ventana gráfica visible en Android? ¿O alguien ha encontrado una solución para esto?

Answer 1

La respuesta parece ser que debe establecer el ancho de la ventana gráfica en el ancho del dispositivo. Parece funcionar en todas las versiones de Android que he probado (2.1, 2.2 y 2.3).

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

Answer 2

He publicado un buen número de mi investigación sobre la ventana gráfica relacionada/anchura tema aquí, que puede ayudarle a ... Web app on android browser WIDTH issue

Answer 3

Ésta es una vieja pregunta, pero no pude encontrar una buena respuesta a esto ... Así que después de un montón de trabajo en un montón de dispositivos Android creo que encontré una gran solución (hack) para el problema de Android. Prueba esto:

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

O

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

Luego agarra el tamaño de ese elemento

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

Answer 4

he llegado con un enfoque ligeramente diferente que debería funcionar en plataformas cruzadas

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

también respondió a esta pregunta ...

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