Oh! Android
  1. Oh! Android
  3. Javascript для определения ширины экрана мобильного браузера?
Intereting Posts
Почему экранная запись получает ошибку при записи на экране с помощью командной строки Использование изображения эмулятора Android на нескольких компьютерах Android runOnUiThread объяснение Nullpointerexception getSystemService Потеря содержимого файла на Google Диске Понимание намерений в Android-аутентификации Как я могу воспроизвести видео в кусках байтов? Как совместить int с перечислением Styling ActionMode ActionBar в Android 5.0 Lollipop (с AppCompat) Кэш зависимостей Gradle может быть поврежден Ошибка при импорте пакетов Как предотвратить добавление фрагмента несколько раз? Как Android «ОС» обнаруживает входящий вызов Как вы обрабатываете транзакции фрагментов, когда состояние родительской активности обязательно сохраняется? OnLocationChanged не вызывается автоматически

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

Я использовал 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.