Как найти виртуальную ширину области просмотра / экрана с помощью Javascript?

Есть ли последовательный способ определения ширины экрана и виртуального окна просмотра для мобильных устройств с помощью Javascript? Мои целевые платформы - мобильный Safari и стандартный браузер Android, но я также тестирую другие браузеры на Android.

Я пробовал с screen.width, window.innerWidth, document.getElementByTagName("body")[0].clientWidth и jQuery $(window).width().

Мобильный Safari (начиная с ios 3.1.3 (7E18), оригинальный iPod touch) показывает полезные значения, а стандартный браузер Android (Android 2.3.7) - нет.

В идеале я думаю, что screen.width должен показывать фактическое разрешение экрана в пикселях: 320 пикселей на iPod Touch и 480 пикселей на Samsung Galaxy S2. На основании того, что я читал, одно из других чисел должно показывать ширину области просмотра layout, которая должна составлять 980 пикселей на iTouch и 800 пикселей на Samsung Galaxy S2. .
.

Код

<body>
<h1>screen.width: <span id="screen_width"></span></h1>
<h1>window.innerwidth: <span id="window_innerwidth"></span></h1>
<h1>clientWidth: <span id="clientwidth"></span></h1>
<h1>jQuery width: <span id="jquery_width"></span></h1>
</body>

<script type="text/javascript" src="jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
    window.onload = function(){
        var swidth = screen.width;
        var wiwidth = window.innerWidth;
        var cwidth = document.getElementsByTagName("body")[0].clientWidth;
        var jwidth = $(window).width();
        document.getElementById("screen_width").innerHTML = swidth;
        document.getElementById("window_innerwidth").innerHTML = wiwidth;
        document.getElementById("clientwidth").innerHTML = cwidth;
        document.getElementById("jquery_width").innerHTML = jwidth;
    }
</script>

.
.

Результаты

iOS Safari:
screen.width: 320
window.innerwidth: 980
clientWidth: 964
jQuery width: 980

Браузер Android:
screen.width: 800
window.innerWidth: 800
clientWidth: 784
jQuery width: 800

Firefox Mobile (он же Fennec):
screen.width: 480
window.innerwidth: 980
clientWidth: 964
jQuery width: 980

Конечно, можно использовать результаты Safari, но не результаты браузера Android.

Парадоксально, что мобильные результаты Firefox точны. Хотя он обеспечивает приятный просмотр с точки зрения пользователя, это недостаточно большая цель для мобильных устройств, и есть много других вещей, которые не работают в этом браузере.


mobile android javascript mobile-safari
person Community    schedule 30.12.2011    source источник

Ответы (3)


arrow_upward
3
arrow_downward

Другой вопрос StackOverflow имеет следующее решение:

setTimeout(YourFunction, 200);

А если вам нужны подробности, вы можете прочитайте об ошибке в системе отслеживания проблем. Вы столкнулись с ошибкой, которая существует в Android 2.2 и 2.3.

person Trott    schedule 12.01.2012

arrow_upward
3
arrow_downward

Может помочь установить масштаб viewport на 1.0 с помощью этого тега <meta>:

<meta name="viewport" content="initial-scale=1.0; minimum-scale=1.0; maximum-scale=1.0;"/>

Это решило аналогичную проблему для меня, когда я создавал адаптивный макет HTML / CSS для мобильного приложения (я использовал запросы CSS @media).

person Peter-Paul van Gemerden    schedule 30.12.2011
comment
Я хочу, чтобы пользователи могли увеличивать или уменьшать масштаб, поэтому я не хотел бы использовать минимальный или максимальный масштаб. Если бы я использовал начальный масштаб, это, вероятно, позволило бы странице хорошо вписаться в мобильный браузер. Я поэкспериментирую с этим и с другой шириной блока контента. Прямо сейчас я просто пытаюсь понять, что я могу рассказать о мобильном браузере, не прибегая к сниффингу UA. - person ; 30.12.2011

arrow_upward
2
arrow_downward

Вы можете узнать различную ширину области просмотра, перейдя по следующей ссылке на устройстве.

http://ipad.atwebpages.com/viewport.html

Это будет работать как для настольных, так и для мобильных браузеров.

Чтобы добавить, область просмотра в основном полезна только для мобильных устройств ...

person copenndthagen    schedule 31.12.2011