Jak programowo znaleźć szerokość urządzenia w telefonie komórkowym Phonegap/JQuery

Question

Potrzebuję znaleźć szerokość urządzenia urządzenia mobilnego. Chociaż możemy określić treść

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

ale trzeba programowo uzyskać szerokość urządzenia do obliczenia pewnej logiki w mojej aplikacji. Jak mogę uzyskać szerokość urządzenia?

Answer 1

The viewport wymiary mogą być zbierane za pośrednictwem obiektu window:

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

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

Choć nie zawsze uzyskać doskonałe rezultaty, różne urządzenia zachowują się inaczej, a to daje viewport wymiary, a nie wymiar ekranu.

Ewentualnie można sprawdzić szerokość elementu data-role="page" aby znaleźć device-width (ponieważ jest ustawiona na 100% z device-width):

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

Answer 2

Nie wiesz, że proponowane rozwiązanie działa zgodnie z oczekiwaniami. Jesteś pewien, że masz prawdziwą szerokość urządzenia?

Używam następujący kod w mojej aplikacji i działa prawidłowo:

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

Nadzieję, że może komuś pomóc!