Смысл масштабирования мета-виджета Android: что мне не хватает?

Я пытаюсь определить, как на видовом экране - и на содержимом внутри - влияет метатег viewport, используемый для рисования контента с помощью WebView или с родным браузером.

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

Во-первых, некоторые наблюдения:

Ни один из номеров ширины видового экрана не является точно таким, как я ожидал, только близко.
Когда числа близки к числу пикселей устройства, рисунок фактически выполняется один за другим - или, по крайней мере, видимо выглядит таким образом.
Если размер страницы (размер документа) находится под размером окна просмотра, номера в окне просмотра уменьшаются. То есть, окно просмотра не всегда обязательно представляет максимально возможное видимое пространство - просто текущее видимое пространство.
Аналогично, в собственном браузере размер видового экрана настраивается верхней панелью. Размер увеличивается при прокрутке экрана. Указанные цифры предназначены для полноэкранного отображения.

Устройство №1: физический экран имеет разрешение 1024x600 и работает под управлением Android 2.2.

initial-scale = 1.0 = > 676x400
initial-scale = 1.0, width = device-width = > 676x400
initial-scale = 2, width = device-width = > 338x200
initial-scale = 2, width = device-width, target-densitydpi = device-dpi = > 507x300
начальная шкала = 0,5, ширина = ширина устройства, target-densitydpi = device-dpi = > 800x473
начальная шкала = 0,9, ширина = ширина устройства, target-densitydpi = device-dpi = > 800x473
width = device-width, target-densitydpi = device-dpi = > 1014x600
начальная шкала = 1.0, ширина = ширина устройства, target-densitydpi = device-dpi = > 1014x600
начальная шкала = 0,5, ширина = ширина устройства, target-densitydpi = device-dpi, минимальный масштаб = 0,1 = > 2028x768
начальная шкала = 0,5, ширина = ширина устройства, target-densitydpi = device-dpi, минимальный масштаб = 0,1, масштабируемый пользователем = нет = > 1014x600

Устройство # 2: физический экран - 800x480 и работает под управлением Android 2.3.2.

initial-scale = 1.0 = > 527x320
initial-scale = 1.0, width = device-width = > 527x320
initial-scale = 2, width = device-width = > 263x160
initial-scale = 2, width = device-width, target-densitydpi = device-dpi = > 395x240
начальная шкала = 0,5, ширина = ширина устройства, target-densitydpi = device-dpi = > 790x480
начальная шкала = 1.0, ширина = ширина устройства, target-densitydpi = device-dpi = > 790x480
начальная шкала = 0,5, ширина = ширина устройства, target-densitydpi = device-dpi, минимальный масштаб = 0,1 = > 1580x768
начальная шкала = 0,5, ширина = ширина устройства, target-densitydpi = device-dpi, минимальный масштаб = 0,1, масштабируемый пользователем = нет = > 790x480
width = 1580, target-densitydpi = device-dpi = > 790x480
width = 1580, target-densitydpi = device-dpi = > 790x480
width = 1580, target-densitydpi = device-dpi, минимальная шкала = 0,1 = > 790x480

Из этих результатов следующее не имеет смысла:

Устройство №1, пункты 5, 6 и 10
Устройство № 2, пункты 5, 8, 10, 11, 12

Кто-нибудь знает, что происходит с теми, которые не имеют смысла?

Кто-нибудь знает, почему многие из значений являются 10 пикселями, застенчивыми в соответствии с физическими пикселями, но результат такой, как если бы они совпадали? (например, 1,7 и 2,6)

Я делаю что-то не так, или кажется, что невозможно увеличить масштаб за пределы 1.0, если пользователю также не разрешено масштабировать и значение минимального масштаба установлено?

То есть, хотя допустимые значения составляют от 0,01 до 10, значения начального значения ниже 1.0 игнорируются, если вы не можете установить минимальную шкалу.

Android-документы говорят, когда масштабируемость пользователя не та, что значения масштаба min/max игнорируются. Это не очень полезно. И 2.9-2.11, похоже, показывают, что вы не можете просто рассчитать его сами и установить ширину.

Наконец, HTML, который я использую:

<html>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
<head>
    <meta name="viewport" content="initial-scale=0.5, width=device-width, target-densitydpi=device-dpi, minimum-scale=0.1, user-scalable=no" />
</head>
<body style="margin:0;">
<div id="bld" class="bld" style="position:absolute; width:250px; height:125px; left:50px; background-color:#ccccff;">Hello world.</div>
<img id="bl1" src="http://commondatastorage.googleapis.com/kf6nvr/images/1024x768.png" />
<script> 
$("#bl1").click(function(){
    var pageWidth = $(document).width();
    var pageHeight = $(document).height();
    var viewportWidth = $(window).width();
    var viewportHeight = $(window).height();

     $("#bld").html("Page width: "+pageWidth+"<br />pageHeight: "+pageHeight+"<br />port width: "+viewportWidth+"<br />port height: "+viewportHeight);
});
</script> 
</body>
</html>

Итак... что мне не хватает?

Ответ 1

Интересная возможность червей, которые вы открыли там. По мере того как вы пробуете больше устройств, вы, вероятно, увидите еще более странные и случайные ошибки. Интересные времена!: -)

Я подозреваю, что где-то вниз по линии, которую вы, возможно, захотите сдаться, и просто попробуйте...

Используйте как можно более простые настройки.
Принять ширину пикселя, которую устройство хочет сообщить.
Полагайтесь на адаптивную/жидкую компоновку и относительную ширину, чтобы заставить вещи работать на разных ширинах экрана.
Используйте собственные свойства CSS для нейтральной рендеринга разрешения округлых углов, теней и градиентов.
Как можно больше использовать векторные форматы (svg, значки и т.д.)
и (important) Используйте high-res border-image, а также background-image в сочетании с хорошо поддерживаемым background-size свойство ¹ чтобы сделать вещи полезными и четкими ².

¹⁾ Чтобы обеспечить обратную совместимость с более старыми браузерами (например, MSIE8), вам нужно будет использовать объявления double background-image - например:

background-image: url(low-res.png);        /* CSS2 */
background-image: url(high-res.png), none; /* CSS3 */
background-size:  100px 10px;             /* CSS3 */

²⁾-webkit-max-device-pixel-ratio медиа-запрос также может помочь, но, как следует из названия, он работает только для webkit браузеров.

Бродить:

У устройств Android и iOS нового поколения есть такие разностные DPI, что они прибегают к сообщению CSS пикселей, а не фактическим пикселям устройства. Это хорошо или плохо - в зависимости от того, как вы на это смотрите.

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

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

Проблема с использованием target-densitydpi=device-dpi заключается в том, что она, когда она творит чудеса на экране с разрешением 7 дюймов в ширину 800 пикселей, полностью разрушит ваше приложение на экране размером 9 дюймов на 4 дюйма.

Ответ 1

Ответ 2