Как найти виртуальный видовой экран / ширину экрана с помощью Javascript? - PullRequest
Новая
       18

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

9 голосов
/ 30 декабря 2011

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

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

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

В идеале, я думаю, что screen.width должно показывать фактическое разрешение экрана в пикселях: 320 пикселей на iPod Touch и 480 пикселей на Samsung Galaxy S2. Исходя из того, что я читал, одно из других чисел должно показывать ширину макета области просмотра, которая должна быть 980px на iTouch и 800px на 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 :
ширина экрана: 320
ширина окна: 980
clientWidth: 964
JQuery ширина: 980

Браузер Android :
ширина экрана: 800
window.innerWidth: 800
clientWidth: 784
JQuery ширина: 800

Firefox Mobile (a.k.a. Fennec) :
ширина экрана: 480
ширина окна: 980
clientWidth: 964
JQuery ширина: 980

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

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

Ответы [ 3 ]

3 голосов
/ 12 января 2012

Другой вопрос StackOverflow имеет обходной путь: 

setTimeout(YourFunction, 200);

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

3 голосов
/ 30 декабря 2011

Может быть полезно установить масштаб viewport на 1.0, используя этот тег <meta>: 

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

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

1 голос
/ 31 декабря 2011

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

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

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

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

...