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

Utilicé screen.width para obtener el ancho del navegador. Funcionó bien con safari iphone, pero no funcionó en el teléfono Android (mostró 800 de ancho para el navegador Android).

¿Hay alguna forma compatible para obtener el ancho de la pantalla. No quiero utilizar UserAgent para comprobar si su navegador móvil. Gustaría utilizar un javascript para eso y la lógica debe incluir el ancho de la pantalla.

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

 <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.