La pantalla del navegador Android.width, screen.height y window.innerWidth y window.innerHeight no son confiables

Estoy trabajando en una aplicación web dirigida a navegadores de escritorio, tableta y teléfono inteligente.

La aplicación web tiene una caja de luz implementada usando Colorbox con un iframe . Cuando se cambia el tamaño de la ventana del navegador o se cambia la orientación de la tableta / teléfono, el código JavaScript consulta las dimensiones de la ventana para que pueda cambiar el tamaño de algunos elementos de la caja de luz.

El problema que estoy teniendo es que todo funciona bien en el escritorio (Windows: IE, Firefox, Chrome, Mac: Safari), iPad y iPhone pero no en el teléfono inteligente Android (HTC) y Android Emulator.

Android siempre devuelve diferentes valores para screen.width , screen.height , window.innerWidth y window.innerHeight cuando se los consulta desde el evento de redimensionamiento de la ventana, que se dispara varias veces.

¿Por qué el navegador de Android devuelve una variación tan amplia en los valores y cómo puedo detectar de manera confiable el ancho y alto de la ventana del navegador?

En Android, window.outerWidth y window.outerHeight son de forma confiable el tamaño de la pantalla. Dependiendo de su versión de Android, innerWidth / Height suele ser incorrecto.

Aquí hay una muy buena crítica sobre la situación.

A continuación se muestra la diferenciación basada en lecturas con Samsung Tab con Android 4.1

  • screen.height: da la altura real del dispositivo, incluida la barra de tareas y la barra de título
  • window.innerHeight: proporciona la altura excluyendo la barra de tareas, la barra de título y la barra de direcciones (si está visible)
  • window.outerHeight: proporciona la altura que excluye la barra de tareas y la altura de la barra de título (sin importar si la barra de direcciones está visible u oculta, outerHeight incluye la altura de la barra de direcciones).

Estoy usando esto para que funcione entre iOS y Android.

 var screenHeight = (ionic.Platform.isIOS()) ? window.screen.height : window.innerHeight * window.devicePixelRatio; 

Me tomó horas encontrar una solución.

La única constante entre window.innerHeight , window.outerheight , etc. era screen.height .

Este código me dio la estatura exterior:

 screen.height / window.devicePixelRatio - window.screenTop 

Además, para admitir versiones anteriores de Android, coloque su código en un setTimeout

Espero que esto sea útil =)

Prueba esto y revisa tu lectura móvil

  

Debe coincidir con el tamaño de la pantalla (altura) de las especificaciones de su teléfono.

  var throttle = (function () { var timer; return function (fn, delay) { clearTimeout(timer); timer = setTimeout(fn, delay); }; })(), var callback = function (w, h) { alert(w + ' ' + h); } window.onresize = throttle(function () { width = Math.min(window.innerWidth, window.outerWidth); height = Math.min(window.innerHeight, window.outerHeight); callback(width, height); }, 60); 

La respuesta de Dan soluciona la inconciencia entre el navegador de Android … así que publico cómo detecto / cambio la ventana gráfica móvil y la adapto cuando giró (no sé si se puede usar para cualquiera …

 var lastorg=0; //set the begining of script thisorg=parseInt(window.innerWidth)/parseInt(window.innerHeight); //for ratio to detact orietation if(((lastorg<1 && thisorg>1) ||(lastorg>1 && thisorg<1) ||lastorg==0 )){ //is start or change $("#viewport").attr('content', 'width=device-width, initial-scale=1,minimum-scale=1, maximum-scale=1'); // reset viewport to device mywidth = Math.min(window.innerWidth, window.outerWidth); //Dan's way to fix the inconsistancy myheight = Math.min(window.innerHeight, window.outerHeight); lastorg=thisorg; //update the lastorg wr=parseInt(mywidth)/1280; // the minimum desire width hr=parseInt(myheight)/630; // the minimum desire height if(hrPlease rotate your phone/tablet
");//tell user to rotate } }

En mi caso, el enlace setTimeout no fue útil.

Después de algunas excavaciones, descubro que diferentes versiones de Android (y dispositivos) tienen diferentes valores de devicePixelRatio.

Si el dispositivo PixelRatio es igual o mayor que 1, la cantidad real de píxeles en la pantalla (para el punto de vista de la página html) viene dada por window.screen.width (o … height).

Pero, si window.screen.width es inferior a 1 (sucede en algunos dispositivos Android antiguos), la cantidad real de píxeles se convierte en: window.screen.width / devicePixelRatio.

Entonces, solo tienes que lidiar con esto.

 w = window.screen.width; h = window.screen.height; if(window.devicePixelRatio < 1){ w = window.screen.width/window.devicePixelRatio; h = window.screen.height/window.devicePixelRatio; }