Javascript для определения ширины экрана мобильного браузера?

Я использовал screen.width, чтобы получить ширину браузера. Он отлично работал с сафари iphone, но не работал в Android-телефоне (он показывал ширину 800 для браузера Android).

Есть ли совместимый способ получить ширину экрана. Я не хочу использовать UserAgent для проверки его мобильного браузера. Хотел бы использовать javascript для этого, а логика должна включать ширину экрана.

Solutions Collecting From Web of "Javascript для определения ширины экрана мобильного браузера?"

Это проблема – см. Здесь

Когда страница сначала загружает screen.width и screen.height неправильно. Попробуйте тайм-аут:

 setTimeout(CheckResolution, 300); 

Где CheckResolution – ваша функция.

Вы можете попробовать этот url для определения размера экрана и применить стиль 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 

Для тех, кто заинтересован в получении значений ширины браузера, я проверил несколько вариантов:

Я использую bootstrap 3, и единственное решение, соответствующее точкам загрузки bootstrap 3 с IE и Chrome, было:

 window.innerWidth 

Вот результаты с окном 1200px с:

Хром

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

Просто прочитайте эти два URL. Это должно помочь вам получить то, что вам нужно.

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

FYI, Android, вероятно, имеет ширину 800 пикселей. См. Эту статью среди других: Понимание плотности экрана Samsung Galaxy Tab

Edit: О, я думаю, что другой парень был более рыхлым, чем я, который указывал на ошибку Android.

Я считаю, что использование window.outerWidth дает правильное значение. Протестировано с использованием эмуляторов Android BrowserStack.