Вопросы Теги

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

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

Я пробовал с screen.width , window.innerWidth , document.getElementByTagName ("body") [0] .clientWidth и jQuery $ (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. Основываясь на том, что я читал, одно из других чисел должно показывать ширину области просмотра макета , которая должна составлять 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: 980

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

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

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

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

9
задан 30 December 2011 в 09:13
поделиться