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

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

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

Ответ 1

Он знает проблему - см. здесь

При первой загрузке страницы значения screen.width и screen.height неверны. Попробуйте тайм-аут следующим образом:

setTimeout(CheckResolution, 300);

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

Ответ 2

Вы можете попробовать этот 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

Ответ 3

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

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

window.innerWidth

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

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

Ответ 4

Просто прочитайте эти два 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

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

Ответ 5

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