Android, как понюхать размер экрана от браузера webkit?

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

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

источник

2010-11-08 Peter vdL

Не могли бы вы привести пример для очень неточных значений? Что-то ссылка «сообщила ширина/высота: x/y, фактическая ширина/высота: a/b». – Daniel

На Droid X под управлением Android 2.2, сообщает ширину экрана = 800, фактическая ширина экрана 480. Высота отображаемого экрана = 1360, фактическая высота экрана = 854.При перезагрузке страницы сообщается высота экрана = 1220, фактическая высота экрана еще = 854 - Питер –

Спасибо, это странно. Кажется, что это не имеет никакого отношения к DPI устройства. – Daniel

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

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

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

CSS3 Media Queries (Specification)

источник

2010-11-09 17:33:04 Daniel

Я нашел this article полезным, в котором упоминается мета тег, который влияет на андроид и картинки браузеров, которые сделали то, что нужно:

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

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

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

Для iPhone это documented here.

источник

2011-01-17 00:05:06 robocat

На Android вы можете выработать текущее масштабирование, добавив абсолютный div к телу шириной 100% и разделив его 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>

источник

2012-05-29 02:49:24 robocat

FYI: изменение масштабирования на IE6/7/8 и, возможно, 9 обнаружено путем поиска изменений в screen.deviceXDPI screen.deviceYDPI в событии onresize окна (только что заметил код - полезно знать, если вам это нужно, например, когда IE винты из-за изменения масштабирования может заставить ретранслятор). – robocat

Также на Webkit см. Window.devicePixelRatio (фиксированное значение. 1 нормально. 2 для дисплеев Retina, 1,5 или 2 или 2,25 для дисплеев высокой плотности Android) http://www.quirksmode.org/blog/archives/2012/06 /devicepixelrati.html – robocat

Android, как понюхать размер экрана от браузера webkit?

ответ

Смежные вопросы