Cómo buscar mediante programación el ancho del dispositivo en Phonegap/JQuery mobile

Question

Necesito encontrar el ancho del dispositivo del dispositivo móvil. Aunque podemos especificar el contenido

<meta name="viewport" content="width=device-width; user-scalable=no" /> 

pero necesito obtener mediante programación la anchura del dispositivo para calcular cierta lógica en mi solicitud. ¿Cómo puedo obtener el ancho del dispositivo?

Answer 1

Los viewport dimensiones se puede deducir a través del objeto window:

var viewport = { 
    width : $(window).width(), 
    height : $(window).height() 
}; 

//can access dimensions like this: 
//viewport.height 

A pesar de que no siempre se obtendrá un resultado perfecto, diferentes dispositivos se comportan de manera diferente y esto da las dimensiones viewport, no las dimensiones de la pantalla.

Alternativamente se puede comprobar el ancho de un elemento de data-role="page" para encontrar el device-width (ya que se establece en 100% del device-width):

var deviceWidth = 0; 
$(window).bind('resize', function() { 
    deviceWidth = $('[data-role="page"]').first().width(); 
}).trigger('resize');​​​ 

Answer 2

No estoy seguro de que la solución propuesta funciona como se esperaba. ¿Estás seguro de que obtienes el ancho real del dispositivo?

estoy usando el siguiente código en mi aplicación y funciona bien:

function effectiveDeviceWidth() { 
    var deviceWidth = window.orientation == 0 ? window.screen.width : window.screen.height; 
    // iOS returns available pixels, Android returns pixels/pixel ratio 
    // http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html 
    if (navigator.userAgent.indexOf('Android') >= 0 && window.devicePixelRatio) { 
     deviceWidth = deviceWidth/window.devicePixelRatio; 
    } 
    return deviceWidth; 
} 

esperan que los pueda ayudar a alguien!