Смысл масштабирования мета-виджета 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 свойство 1 чтобы сделать вещи полезными и четкими 2.
1) Чтобы обеспечить обратную совместимость с более старыми браузерами (например, MSIE8), вам нужно будет использовать объявления double background-image - например:
background-image: url(low-res.png); /* CSS2 */
background-image: url(high-res.png), none; /* CSS3 */
background-size: 100px 10px; /* CSS3 */
2)-webkit-max-device-pixel-ratio медиа-запрос также может помочь, но, как следует из названия, он работает только для webkit браузеров.
Бродить:
У устройств Android и iOS нового поколения есть такие разностные DPI, что они прибегают к сообщению CSS пикселей, а не фактическим пикселям устройства. Это хорошо или плохо - в зависимости от того, как вы на это смотрите.
Он плохой, потому что вам больше не гарантируется управление пиксельным элементом управления, которое вы использовали для работы с наиболее однородными экранами.
С другой стороны, это хорошо, потому что вы знаете, что ваши проекты никогда не станут настолько крошечными, что их нельзя будет читать/использовать обычными людьми.
Проблема с использованием target-densitydpi=device-dpi заключается в том, что она, когда она творит чудеса на экране с разрешением 7 дюймов в ширину 800 пикселей, полностью разрушит ваше приложение на экране размером 9 дюймов на 4 дюйма.
Ответ 2
$(document).ready(function() {
$('meta[name=viewport]').attr('content','width=1024, user-scalable=no');
});
Попытайтесь работать для отключения масштабирования пользователя после применения правильного масштабирования.
