Android как узнать размер экрана из браузера webkit? - PullRequest
Новая
       6

Android как узнать размер экрана из браузера webkit?

4 голосов
/ 09 ноября 2010

Веб-сервер хочет получать информацию о размере экрана с каждого мобильного телефона, который просматривает веб-страницу.Функции Javascript screen.width и screen.height возвращают крайне неточные значения.

Есть ли у веб-сервера способ определить размер экрана мобильного телефона?Клиентский браузер - это webkit на Android.

Ответы [ 3 ]

1 голос
/ 17 января 2011

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

<meta name="viewport" content="initial-scale=1.0">

Из статьи Мислава. По умолчанию Mobile Safari (то есть без этой директивы) отображает уменьшенную версию страницы шириной 980 пикселей, даже если сам макет уже. Как авторы контента, с помощью этой директивы мы говорим: «Поверьте мне, увеличьте масштаб до естественного, и я позабочусь о том, чтобы он подходил»

Кажется, что при чтении из JavaScript корректируются значения размера и ширины экрана, потому что страница не масштабируется (а если страница больше, вы все равно можете ее прокрутить). В качестве альтернативы, вероятно, есть переменная javascript для считывания уровня масштабирования.

Для iPhone это задокументировано здесь .

1 голос
/ 09 ноября 2010

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

<link rel="stylesheet" type="text/css" 
media="only screen and (min-device-width: 320px)" 
href="logResolutionScript?width=320" />

Используйте в основном те же правила для других значений ширины и высоты и cookie, чтобы проверить, загружает ли клиент более одной таблицы стилей для получения правильного значения.Вы не получите точное разрешение, но оно должно быть достаточно близко.Вы также можете проверить ориентацию и использовать комбинации максимальной / минимальной ширины (устройства).Ваш файл может закончиться довольно большим количеством css-импорта, но вы должны быть в состоянии точно определить разрешение клиента, к сожалению, за счет нескольких HTTP-запросов.

CSS3 Media Queries (спецификация)

0 голосов
/ 29 мая 2012

В Android вы можете определить текущий масштаб, добавив абсолютный div к телу шириной 100% и разделив divW offsetWidth на window.innerWidth. 

var iPadMeasureWidthNode = window.iPadWNode;
if (!iPadMeasureWidthNode) {
    iPadMeasureWidthNode = window.iPadWNode = document.createElement('div');
    // .ipad-measure-w {position:absolute; width:100%; top:-1px}
    iPadMeasureWidthNode.className = 'ipad-measure-w';
    document.body.insertBefore(iPadMeasureWidthNode, document.body.firstChild);
}
var zoominverse = 1000 / Math.round(1000 * iPadMeasureWidthNode.offsetWidth / window.innerWidth);

Элемент можно сохранить вМасштабирование 1: 1 путем инвертирования (отмены) величины масштабирования: 

// Not using scale3d because is hardware zooming which is ugly unreadable blurry pixel magnification.
node.style.webkitTransform = (zoominverse > 1) ? 'scale(' + zoominverse + ')' : '';
node.style.webkitTransformOrigin = (zoominverse > 1) ? '0 0 0' : '';

Изменение масштабирования обнаруживается событием window.onresize (хотя событие изменения размера задерживается до завершения изменения размера ... вы можете обнаружить масштабированиеначать использовать событие gesturestart на iPad или событие document.touchstart и обнаружить 2 пальца вниз.

Редактировать: после трех исправлений, говорящих о том, что это не работает, я подумал, что лучше добавить пример, показывающий, как оно работает,Протестировано работает на: Android 4.1.2 обычный браузер, Android 4.1.2 Chrome, Android Opera Mobile 12.10, iPad 2 iOS4.(Не работает на Android Firefox Mobile и не будет работать в iframe, поэтому jsfiddle не будет работать). 

<!DOCTYPE html>
<html>
<head>
<style>
.ipad-measure-w {
    position: absolute;
    width: 100%;
    top: -1px;
};
</style>
</head>
<body>
<button onclick="alertWidth()">alertWidth</button>
<div style="width: 1600px;  height: 100px; background-color: blue;"></div>
<script>
function alertWidth() {
    var iPadMeasureWidthNode = window.iPadWNode;
    if (!iPadMeasureWidthNode) {
        iPadMeasureWidthNode = window.iPadWNode = document.createElement('div');
        iPadMeasureWidthNode.className = 'ipad-measure-w';
        document.body.insertBefore(iPadMeasureWidthNode, document.body.firstChild);
    }
    var zoominverse = 1000 / Math.round(1000 * iPadMeasureWidthNode.offsetWidth / window.innerWidth);
    alert(zoominverse);
}
</script>
</body>
</html>
...