screen.width del navegador de Android, screen.height & window.innerWidth & window.innerHeight no son confiables

Question

Estoy trabajando en una aplicación web que está dirigida a navegadores en computadoras de escritorio, tabletas y teléfonos inteligentes.

La aplicación web tiene una caja de luz implementada usando Colorbox con 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 & iPhone pero no en el teléfono inteligente Android (HTC) y Android Emulator.

Android siempre devuelve valores diferentes para screen.width, screen.height, window.innerWidth & window.innerHeight cuando se les preguntó desde el interior de evento de cambio de tamaño de la ventana, que 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?

Answer 1

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 outerheight:

screen.height/window.devicePixelRatio - window.screenTop 

Además, con el fin de apoyar a las versiones anteriores de Android, colocar el código en un setTimeout

espero que esto sea útil =)

Answer 2

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 writeup sobre la situación.

Answer 3

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); 

Answer 4

A continuación se diferenciación basada en las lecturas con la lengüeta de Samsung con Android 4,1

• Screen.Height - da la altura real del dispositivo incluyendo barra de tareas y barra de título
  
  
• window.innerHeight - da la altura excluyendo la barra de tareas, la barra de título y la barra de dirección (si está visible)
  
  
• window.outerHeight - da la altura excluyendo barra de tareas y el título altura de la barra, (sin barra de direcciones importa es visible u oculto, outerHeight incluyen la altura de la barra de direcciones.)

Answer 5

Dan respuesta solucionar el inconcistancy entre el navegador de Android .. así que publicar cómo detecto/cambio la ventana gráfica móvil y adaptarla cuando gire (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(hr<wr){ 
vscale=hr; 
if(hr<1){ // if it if small screen, so desktop pc wouldn't change 
windowHeight=630; 
windowwidth=mywidth/hr; 
} 
}else{ 
vscale=wr; 
if(wr<1){ 
    windowwidth=1280; 
    windowHeight=myheight/wr; 
} 
} 
$("#viewport").attr('content', 'width=device-width, initial-scale='+vscale+',minimum-scale='+vscale+', maximum-scale='+vscale); //reset viewport toresize window 
if(thisorg>1){ 
    $("#pro").fadeOut(500); 
}else{ 
$("body").prepend("<div id=pro style='position:absolute;width:800px;height:30px;padding:30px;left:"+(windowwidth/2)+"px;top:"+(windowHeight/2)+"px;margin-left:-430px;margin-top:-45px;;border:1px solid #555;background:#ddeeff;text-align:center;z-index:99999;color:#334455;font-size:40px;' class=shadowme>Please rotate your phone/tablet</div>");//tell user to rotate 
} 
} 

Answer 6

probar esto, y comprobar su lectura móvil

<script> 
var total_height=screen.height*window.devicePixelRatio; 
alert(total_height); 
</script> 

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

Answer 7

Estoy usando esto para que funcione entre iOS y Android.

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

Answer 8

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

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

Si el dispositivoPixelRatio es igual o mayor que 1, el número real de píxeles en la pantalla (para el punto de vista de la página html) viene dado por window.screen.width (o ... height).

Pero, si el window.screen.width es menor que 1 (sucede en algunos dispositivos Android antiguos), el número real de píxeles se convierte en: window.screen.width/devicePixelRatio.

Por lo tanto, solo tiene 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; 
}