Определение ширины высоты WebView в HTML приложении

Подробности

Категория: Разработка

Опубликовано 09.09.2014 17:27

Как на Андроид, так и на IOS для работы HTML приложения или игры используется метод WebView. Очень часто на JS требуется узнать фактический размер Viewport'а (видимой области). И в этом материале мы поговорим о том как это можно сделать и на что опираться во время реализации.

Javascript

Ниже мы рассмотрим две реализации определения ширины и высоты экрана устройства при помощи JAVASCRIPT.

Реализация 1

pageh= (
'innerHeight' in window? window.innerHeight :
document.compatMode!=='BackCompat'? document.documentElement.clientHeight :
document.body.clientHeight
);
pagew= (
'innerWidth' in window? window.innerWidth :
document.compatMode!=='BackCompat'? document.documentElement.clientWidth :
document.body.clientWidth
);

Реализация 2

pageh=Math.max(
Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
Math.max(D.body.clientHeight, D.documentElement.clientHeight)
);
pagew=Math.max(
Math.max(D.body.scrollWidth, D.documentElement.scrollWidth),
Math.max(D.body.offsetWidth, D.documentElement.offsetWidth),
Math.max(D.body.clientWidth, D.documentElement.clientWidth)
);

CSS медиа запрос

Не для всех реализаций это метод подойдёт, но можно используя CSS определить размера экрана. Например:

@media screen and (width: 480px) {
body {
background: #ccc;
}
/*Ваш код CSS для ширины экрана в 480 пикселей*/
}

Подробно мы рассматривали возможные CSS медиа запросы в этом материале.

Не забудьте что проверить фактические размеры экрана в CSS пикселях, выможете засунув такой код и понаблюдав:

<div style="background:red;width:100px;display:block;">100</div>
<div style="background:green;width:200px;display:block;">200</div>
<div style="background:red;width:300px;display:block;">300</div>
<div style="background:green;width:400px;display:block;">400</div>

Определение размера на JS вернуло 320 и 240

Иногда может возникнуть проблема при попытке отыскать размеры используя Javascript. Дело в том что бывает JS может вернуть ширину и высоту окна как 320 на 240, что будет ложью. Такое бывает если вы вызываете измерения втечение первых 1-1,5 секунд. Это действительно как-то связано с самим WebView, возможно что-то не успевает там догрузиться и из-за этого оно возвращает минимально возможный размер.

Для того чтобы этого избежать можно запускать определение размера через допустим 2 секунды, а пока поставить анимацию загрузки. Чтобы начать обсчитывать размер через 2 секунды используйте на событии onload следующее:

SetTimeout(getSize,2000);
function getSize(){
/*Функция получения размера*/
}

Для анимации загрузки используйте обычный гиф и так как мы пока не знаем размеров экрана в JS, самым оптимальным подходом будет центрирование элемента средствами CSS или HTML (таблица).