Javascript para detectar el ancho de la pantalla del navegador móvil?

Es cuestión de saber – ver aquí

Cuando la página carga por primera vez el screen.width y screen.height están equivocados. Pruebe un tiempo de espera como este:

 setTimeout(CheckResolution, 300); 

Donde CheckResolution es su función.

Puedes probar esta url para detectar el tamaño de la pantalla y aplicar un estilo CSS

o

 <script type="text/javascript"> function getWidth() { xWidth = null; if(window.screen != null) xWidth = window.screen.availWidth; if(window.innerWidth != null) xWidth = window.innerWidth; if(document.body != null) xWidth = document.body.clientWidth; return xWidth; } function getHeight() { xHeight = null; if(window.screen != null) xHeight = window.screen.availHeight; if(window.innerHeight != null) xHeight = window.innerHeight; if(document.body != null) xHeight = document.body.clientHeight; return xHeight; } </script> screen.height shows the height of the screen screen.width shows the width of the screen screen.availHeight shows height but removes the interface height like taskbar, and browser menu etc. screen.availWidth same as above,instead gives available width 

Para aquellos interesados ​​en obtener los valores de ancho del navegador, probé varias opciones:

Estoy utilizando bootstrap 3 y la única solución que coincide con el arranque 3 puntos de ruptura con IE y Chrome fue:

 window.innerWidth 

Aquí están los resultados con la ventana de 1200px con:

Cromo

 $( window ).width(): 1183 $( document ).width():1183 screen.width: 1536 $( window ).innerWidth():1183 $( document ).innerWidth():1183 window.innerWidth: 1200 $( document ).outerWidth():1183 window.outerWidth: 1216 document.documentElement.clientWidth: 1183 

Internet Explorer 10

 $( window ).width(): 1200 $( document ).width():1200 screen.width: 1536 $( window ).innerWidth():1200 $( document ).innerWidth():1200 window.innerWidth: 1200 $( document ).outerWidth():1200 window.outerWidth: 1214 document.documentElement.clientWidth: 1200 

Acaba de leer estas dos URL. Debe ayudarle a conseguir lo que necesita.

http://www.quirksmode.org/blog/archives/2010/08/combining_media.html http://www.quirksmode.org/mobile/tableViewport.html

FYI, el Android es probablemente 800px de ancho. Vea este artículo entre otros: Descripción de la densidad de la pantalla Samsung Galaxy Tab

Edit: Oh, creo que el otro tipo fue más correcto que yo que señaló el error de Android.

Encuentro que usar window.outerWidth da el valor correcto. Probado esto usando los emuladores de BrowserStack android.