Javascript do wykrywania szerokości ekranu przeglądarki mobilnej?

Question

Użyłem screen.width, aby uzyskać szerokość przeglądarki. to działało dobrze z iphone safari, ale nie działało w telefonie z Androidem (pokazało 800 szerokości dla przeglądarki Android).

Czy istnieje jakiś zgodny sposób uzyskania szerokości ekranu. Nie chcę używać UserAgent do sprawdzania, czy jest to przeglądarka mobilna. chciałbym użyć do tego javascript, a logika powinna zawierać szerokość ekranu.

Answer 1

Możesz spróbować tego URL detect screen size and apply a CSS style

lub

<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 

Answer 2

To wiem problem - patrz here

Kiedy pierwsza strona ładuje screen.width i screen.height są błędne. Spróbuj timeout tak:

setTimeout(CheckResolution, 300); 

Gdzie CheckResolution jest twoja funkcja.

Answer 3

Wystarczy przeczytać te dwa adresy URL. To powinno pomóc Ci uzyskać to, czego potrzebujesz.

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

FYI, Android prawdopodobnie jest 800px szerokości. Zobacz ten artykuł między innymi: Understanding Samsung Galaxy Tab screen density

Edytuj: Och, myślę, że ten drugi facet był ode mnie silniejszy niż ten, który wskazywał na błąd Androida.

Answer 4

Uważam, że za pomocą window.outerWidth podaje się poprawną wartość. Przetestowano to przy użyciu emulatorów Android BrowserStack.

Answer 5

Dla zainteresowanych w uzyskaniu wartości szerokości przeglądarki, przetestowałem kilka opcji:

Używam bootstrap 3 a jedynym rozwiązaniem dopasowując Bootstrap 3 punkty przerwania zarówno z IE i Chrome została:

window.innerWidth 

Oto wyniki z 1200 pikseli z okna:

Chrome

$(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