Я использовал screen.width, чтобы получить ширину браузера. Он отлично работал с сафари iphone, но не работал в Android-телефоне (он показывал ширину 800 для браузера Android).
Есть ли совместимый способ получить ширину экрана. Я не хочу использовать UserAgent для проверки его мобильного браузера. Хотел бы использовать 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.