С удобством от устройства к устройству. Часть 4

Артемий Ломов

В весьма пространной третьей части нашей серии статей мы обсудили пример простого шаблона веб-страницы, использующего Media Queries, а вместе с ним по ходу пьесы — и вообще актуальные подходы к верстке с применением HTML5 и CSS3. Поначалу планировалось этим и ограничиться, но вдруг выяснилось, что тщательный разбор примера породил у некоторых читателей больше вопросов, чем ответов. В основном дело касается особенностей отображения веб-страниц на мобильных устройствах. В общем, похоже, назрела «сверхплановая», четвертая статья.

Тест!

Чтобы дальнейшее обсуждение не оказалось голословным, я решил положить в основу этой статьи специально для нее разработанный тест, результаты которого мы и попытаемся осмыслить. Этот тест состоит из двух простых веб-страничек, отличающихся друг от друга только наличием/отсутствием конструкции <meta name="viewport" content="width=device-width"> в коде разметки. Итак:

(Переключаться между страничками можно, открыв любую одну из вышеприведенных ссылок.)

Тест определяет, поддерживает ли браузер медиавыражения и, если да, отображает значения медиахарактеристик, связанных с ориентацией, шириной и высотой области просмотра (viewport), а также шириной и высотой устройства в целом. Размеры области просмотра и экрана устройства также измеряются в справочном порядке при помощи JavaScript.

С десктопными браузерами ситуация скучна и предсказуема — при прочих равных условиях в обеих частях теста они показывают одинаковые результаты. А вот на мобильных устройствах результаты различаются, и порой весьма существенно. Более того, специфика этих различий носит индивидуальный характер для каждого из устройств.

Пожалуй, для того, чтобы появился предмет для разговора, имеет смысл сразу привести результаты нашего теста, показанные несколькими реальными мобильными устройствами, временно изъятыми мной у разных хороших людей в интересах науки. Все числовые значения в табличках выражены в пикселях. Последовательность строк в таблицах соответствует порядку, в котором перечисляются результаты соответствующих измерений непосредственно на тестовых страничках.

Apple iPad 2

Особенности устройства: планшет, 768×1024 аппаратных пикселей, iOS, Safari.

Характеристика Часть 1 теста (c использованием метатега viewport) Часть 2 теста (без использования метатега)
Ориентация (orientation) портретная ландшафтная портретная ландшафтная
Ширина области просмотра (width) 641—800 641—800 801—1024 801—1024
Высота области просмотра (height) 801—1024 481—640 1025—1280 481—640
Ширина устройства (device-width) 641—800 641—800 641—800 641—800
Высота устройства (device-height) 801—1024 801—1024 801—1024 801—1024
Размеры области просмотра 768×900 768×483 980×1149 981×617
Размеры устройства 768×1024 768×1024 768×1024 768×1024

Acer Iconia Tab A500

Особенности устройства: планшет, 800×1280 аппаратных пикселей, Android.

Характеристика Часть 1 теста (c использованием метатега viewport) Часть 2 теста (без использования метатега)
Ориентация (orientation) портретная ландшафтная портретная ландшафтная
Ширина области просмотра (width) 641—800 1025—1280 801—1024 801—1024
Высота области просмотра (height) 1025—1280 641—800 от 1281 481—640
Ширина устройства (device-width) 641—800 1025—1280 641—800 1025—1280
Высота устройства (device-height) 1025—1280 641—800 1025—1280 641—800
Размеры области просмотра 800×1128 1280×648 980×1382 980×496
Размеры устройства 800×1280 1280×800 800×1280 1280×800

Apple iPhone 4

Особенности устройства: смартфон, 640×960 аппаратных пикселей, iOS, Safari.

Характеристика Часть 1 теста (c использованием метатега viewport) Часть 2 теста (без использования метатега)
Ориентация (orientation) портретная ландшафтная портретная ландшафтная
Ширина области просмотра (width) до 320 до 320 801—1024 801—1024
Высота области просмотра (height) 321—480 до 320 1025—1280 321—480
Ширина устройства (device-width) до 320 до 320 до 320 до 320
Высота устройства (device-height) 321—480 321—480 321—480 321—480
Размеры области просмотра 320×356 320×156 980×1097 981×425
Размеры устройства 320×480 320×480 320×480 320×480

LG Optimus Sol E730

Особенности устройства: смартфон, 480×800 аппаратных пикселей, Android, Opera Mobile.

Характеристика Часть 1 теста (c использованием метатега viewport) Часть 2 теста (без использования метатега)
Ориентация (orientation) портретная ландшафтная портретная ландшафтная
Ширина области просмотра (width) до 320 481—640 801—1024 801—1024
Высота области просмотра (height) 321—480 до 320 1025—1280 321—480
Ширина устройства (device-width) до 320 481—640 до 320 481—640
Высота устройства (device-height) 481—640 до 320 481—640 до 320
Размеры области просмотра 320×403 533×189 981×1234 980×348
Размеры устройства 480×762 800×442 480×762 800×442

Samsung GT-S5330

Особенности устройства: смартфон, 240×400 аппаратных пикселей, Bada.

Характеристика Часть 1 теста (c использованием метатега viewport) Часть 2 теста (без использования метатега)
Ориентация (orientation) портретная ландшафтная портретная снова портретная (самопроизвольно переключается)
Ширина области просмотра (width) до 320 321—480 до 320 321—480
Высота области просмотра (height) до 320 до 320 до 320 641—800
Ширина устройства (device-width) до 320 321—480 до 320 321—480
Высота устройства (device-height) до 320 до 320 до 320 641—800
Размеры области просмотра 240×285 400×136 240×285 400×136 (без обновления)
Размеры устройства 240×285 400×136 240×285 400×136

Осмысление наблюдений

Протестировано пять случайных, но относительно разнообразных девайсов, попавшихся автору под руку — два планшета и три смартфона. Их технические характеристики приведены выше непосредственно перед каждой табличкой с результатами тестов. Цели собрать сколько-либо всеобъемлющую статистику не преследовалось. Ставилась скромная задача получить некую пищу к размышлению, и, кажется, эта задача в целом решена.

Несколько слов о методике тестирования

Все устройства поддерживают Media Queries — проверка определенных в CSS-коде условий исправно срабатывает. Тесты призваны определить ориентацию устройства (портретная — portrait или ландшафтная — landscape) при помощи проверки медиахарактеристики orientation, а также выявить, в каком диапазоне лежат значения медиахарактеристик width и height (ширина и высота области просмотра, viewport), device-width и device-height (ширина и высота устройства в целом). Этих диапазонов предусматривается по семь для каждой из проверяемых медиахарактеристик: до 320, 320—480, 481—640, 641—800, 801—1024, 1025—1280, 1281 и более пикселей.

Кроме того, размеры области просмотра и устройства в целом явно определяются в справочном порядке при помощи JavaScript. Ширина и высота области просмотра измеряется на основе получения значений DOM-свойств window.innerWidth и window.innerHeight соответственно, если только браузер поддерживает их. В противном случае используются DOM-свойства document.documentElement.clientWidth и document.documentElement.clientHeight — это, как многие поняли, актуально разве что для IE. Браузеры всех исследованных девайсов исправно выполняют измерения первым из названных способов. Ширина и высота устройства в целом измеряется получением значений DOM-свойств window.screen.width и window.screen.height соответственно. Это работает во всех распространенных ныне браузерах, включая IE.

Размеры устройства

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

Одной из первых бросается в глаза особенность поведения девайсов производства фирмы Apple. У планшета iPad 2 и у смартфона iPhone 4 ширина — это всегда размер меньшей стороны, а высота — размер большей стороны вне зависимости от ориентации, тогда как у всех остальных протестированных устройств ширина — это горизонтальный размер, а высота — вертикальный, то есть, иными словами, они могут меняться между собой местами в зависимости от того, как повернут девайс в данный конкретный момент.

Определяемые различными способами (при помощи CSS и JavaScript) ширина и высота устройства далеко не всегда отражают реальные размеры девайса в аппаратных пикселях. Говоря точнее, из пяти протестированных нами устройств только два (оба — планшеты) показали наиболее ожидаемые результаты «без сюрпризов».

Смартфон iPhone 4, обладая экраном с матрицей из 640×960 аппаратных пикселей, сообщил нам вдвое «заниженный» результат — 320×480 пикселей, аналогичный таковому у iPhone предшествующего, третьего, поколения. Это так называемые виртуальные пиксели. Коэффициенты, выбираемые производителями для «обмана» веб-разработчиков, определяются разрешающей способностью девайсов, которая, напомним, отражает количество элементов изображения на единицу длины и измеряется традиционно в точках на дюйм (dpi) или на сантиметр (dpcm). У современных мобильных устройств разрешающая способность гораздо выше таковой у экранов мониторов настольных компьютеров, вследствие чего на мобильных девайсах CSS-пиксели — уже в общем случае не то же самое, что аппаратные пиксели. Куда катится этот мир?..

На двух планшетах и iPhone результаты измерений ширины и высоты устройства, полученные при помощи CSS и JavaScript, похоже, совпадают друг с другом. А вот оставшиеся два смартфона демонстрируют много всяких интересностей.

В результатах измерений размеров устройства, получаемых на смартфонах LG Optimus Sol E730 и Samsung GT-S5330 при помощи JavaScript, верить можно только одной цифре — первой, отражающей ширину. Природу второго числа в случае LG Optimus Sol E730 мне разгадать не удалось; на Samsung GT-S5330 оно в точности совпадает с высотой области просмотра, но не устройства в целом.

Что касается корреляции этих данных с результатами, полученными при помощи CSS, то на смартфоне LG Optimus Sol E730 показатели, полученные с использованием медиавыражений, «занижены» по сравнению с величинами, измеренными с применением JavaScript. Скорее всего, речь идет о коэффициенте 1,5 — именно в такое количество раз различаются измеренные при помощи JavaScript ширина устройства и ширина области просмотра (об этом ниже).

Смартфон Samsung GT-S5330 ведет себя и вовсе странно. Измеренные при помощи JavaScript ширина и высота устройства всегда совпадают с измеренными опять же при помощи JavaScript шириной и высотой области просмотра. С показателями, полученными при помощи медиавыражений, эти данные совпадают только в рамках первой части теста, а также во второй части теста при условии портретной ориентации устройства. Если же повернуть смартфон так, чтобы фактически его ориентация стала ландшафтной, во второй части теста медиахарактеристика orientation все равно примет значение portrait (!), а вычисленные значения медиахарактеристик device-height и просто height превысят число аппаратных пикселей по большей стороне, уложившись в диапазон 641—800 пикселей. Есть подозрение, что этими значениями окажется число, равное коэффициенту 400⁄240 (отношение фактических ширины и высоты устройства), вновь умноженному на 400. Весело, в общем.

Размеры области просмотра

Если говорить о размерах устройства, первая и вторая часть теста показывают идентичные результаты измерений для всех девайсов за исключением единственного случая смартфона Samsung GT-S5330 в фактически ландшафтной, но определяемой как портретная ориентации при прохождении второй части теста. Совсем другая картина наблюдается, когда речь заходит о размерах области просмотра.

HTML-код страницы, соответствующей первой части нашего теста, содержит внутри себя конструкцию <meta name="viewport" content="width=device-width">. Этот метатег предписывает мобильному браузеру приравнять ширину области просмотра к ширине девайса с тем, чтобы веб-страница после загрузки заняла в точности всю доступную ширину устройства.

В HTML-коде страницы, представляющей вторую часть нашего теста, такого метатега не содержится. Мобильные браузеры при этом устанавливают ширину области просмотра равной некоторому значению по умолчанию. (Для всех протестированных нами устройств, кроме смартфона Samsung GT-S5330, таким значением по умолчанию является величина в 980 пикселей.)

Возьмем, к примеру, наш iPhone 4 (пусть он будет, для определенности, в портретной ориентации). Не забудем, что все рассуждения о ширине и высоте справедливы для этого девайса в терминах виртуальных, а не аппаратных пикселей. Итак, при отображении первой тестовой страницы ширина области просмотра будет в точности соответствовать ширине устройства — 320 пикселей (да-да, виртуальных). При отображении второй страницы теста ширина области просмотра будет соответствовать значению по умолчанию — 980 пикселей.

Используемая нашим тестом таблица стилей, между тем, предписывает установить шрифту текста (на уровне элемента <body>) размер в 16 пикселей. При отображении первой тестовой страницы именно так и произойдет. При отображении второй — так может произойти, но только в том случае, когда страница потребует горизонтальной прокрутки, заняв в ширину 980⁄320 = 3,0625 экрана. В случае же, когда страница будет показываться без прокрутки, целиком укладываясь в ширину экрана, текст станет масштабироваться, и его кегль составит 16⁄3,0625 ≈ 5 пикселей.

Надеюсь, этот простой пример показывает важность применения метатега <meta name="viewport" content="…"> в коде страниц, для которых предполагается возможность просмотра на мобильных устройствах.

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

У мобильных устройств фирмы Apple, как уже отмечалось выше, ширина девайса — это всегда длина меньшей стороны экрана вне зависимости от его ориентации. Таким образом, при использовании в коде страницы конструкции <meta name="viewport" content="width=device-width"> вычисляемая ширина области просмотра в случае ландшафтной ориентации устройства окажется меньше его фактического горизонтального размера. (Это, в частности, 768 пикселей для iPad 2 и 320 пикселей для iPhone 4.) Элементы страницы при таком раскладе будут соответствующим образом масштабироваться — ну, в частности, шрифт на странице в ландшафтной ориентации будет крупнее, чем в портретной. Такого эффекта не будет наблюдаться на планшетах с Android (в частности, на нашем Acer Iconia Tab A500), как, впрочем, и на любых других устройствах, на которых ширина и высота могут меняться местами в зависимости от ориентации. Подозреваю, что к таковым относится подавляющее большинство девайсов, не являющихся продуктами фирмы Apple.

Смартфон LG Optimus Sol E730 примечателен тем, что ширина и высота устройства, определяемые при помощи CSS, в 1,5 раза меньше соответствующих размеров, выраженных в аппаратных пикселях. Это предсказуемым образом влияет на ширину и высоту области просмотра, определяемые в первой части теста как при помощи CSS, так и при помощи JavaScript. А вот цифры, которые сообщает нам JavaScript в отношении размеров устройства, выглядят весьма странно, что мы уже успели отметить.

Высота области просмотра, определяемая на различных устройствах как при помощи CSS, так и при помощи JavaScript, изменяется от одной части теста к другой приблизительно пропорционально ширине. (Примеры: 320×356 пикселей в первом тесте, 980×1097 пикселей — во втором в случае iPhone 4; 1280×648 пикселей в первом тесте, 980×496 пикселей — во втором в случае Acer Iconia Tab A500.)

Нечто вроде выводов

Результаты нашего скромного теста наглядно демонстрируют тот факт, что мир мобильных устройств пока что, мягко говоря, далек от стройной системы со строго и четко выверенными закономерностями. Веб-разработчиков, отважившихся ступить на эту «темную сторону», ждет масса удивительных открытий и веселых сюрпризов. Впрочем, одна вещь вполне очевидна: если есть намерение добиться хоть сколько-нибудь предсказуемых результатов, не следует пренебрегать метатегом <meta name="viewport" content="…">. (Через несколько лет он, вероятно, уступит свое место находящейся в разработке спецификации CSS Device Adaptation, для коей, фактически, послужил прообразом, но пока говорить об этом преждевременно.)

Не считаю лишним в очередной раз привести ссылки на видеозапись и презентацию доклада Вадима Макеева «Прокрустовы окна», помогающего начинающим разработчикам мобильных сайтов относительно быстро сориентироваться и войти в курс дела.