MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Использование viewport мета тега для управления разметкой на мобильных браузерах

Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

Введение

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

Mobile Safari представил «viewport meta tag», чтобы позволить веб-разработчикам контролировать размер окна просмотра и масштаб. Многие другие мобильные браузеры поддерживают этот тег, хотя он не является частью какого-либо веб-стандарта. Apple документация даёт хорошее описание, объясняя как веб-разработчики могут использовать этот тег. Но мы должны были выполнить расследование, чтобы точно выяснить, как ее реализовать в Fennec. Например, документация Safari говорит, что контент представляет собой «список с разделителями-запятыми», но существующие браузеры и веб-страницы используют любое сочетание запятых, точек с запятой и пробелов в качестве разделителей.

Узнайте больше об viewport в разных мобильных браузерах можно в Рассказе о Двух Viewport'ах на quirksmode.org.

Основы Viewport

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

<meta name="viewport" content="width=device-width, initial-scale=1">

Свойство width определяет размер окна просмотра. Он может быть установлен на определенное количество пикселей, такое как width=600 или на специальное значение device-width, которое является шириной экрана в пикселях CSS в масштабе 100%. (Существуют соответствующие значения height и device-height, которые могут быть полезны для страниц с элементами, которые изменяют размер или положение на основе высоты окна просмотра).

Свойство initial-scale контролирует уровень масштабирования при первой загрузке страницы. Свойства maximum-scale,  minimum-scale и user-scalable определяют, как пользователям разрешено увеличивать или уменьшать страницу.

Пиксель это не пикселем

В последние годы разрешение экрана увеличилось до такого размера, что отдельные пиксели трудно отличить от человеческого глаза. Например, последние смартфоны обычно имеют 5-дюймовые экраны с разрешением выше 1920-1080 пикселей (~400 точек на дюйм). Из-за этого многие браузеры могут отображать свои страницы в меньшем физическом размере, переведя несколько аппаратных пикселей для каждого пикселя CSS. Первоначально это вызывало проблемы удобства использования и удобства чтения на многих веб-сайтах, оптимизированных для сенсорного экрана. Питер-Пол Кох написал об этой проблеме в «Пикселе не пиксель».

На экранах с высоким разрешением экрана страницы с initial-scale=1 будут эффективно масштабироваться браузерами. Их текст будет плавным и четким, но их растровые изображения, вероятно, не будут использовать полное разрешение экрана. Чтобы получить более четкие изображения на этих экранах, веб-разработчики могут создать изображения - или целые макеты - в более высоком масштабе, чем их конечный размер, а затем масштабировать их с помощью свойств CSS или viewport. Это соответствует спецификации CSS 2.1, которая гласит:

Если плотность пикселей устройства вывода сильно отличается от плотности изображения на типичном дисплее компьютера, пользовательский агент должен масштабировать значения пикселей. Рекомендуется, чтобы блок пикселей ссылался на все количество пикселей устройства, которые наилучшим образом приближаются к опорному пикселю. Рекомендуется, чтобы опорный пиксель представлял собой угол зрения одного пикселя на устройстве с плотностью пикселей 96dpi и расстоянием от считывателя длины руки.

Для веб-разработчиков это означает, что размер страницы намного меньше, чем фактическое количество пикселей, и браузеры могут соответственно изменять их макеты и изображения. Но помните, что не все мобильные устройства имеют одинаковую ширину; Вы должны следить за тем, чтобы ваши страницы хорошо работали при большом изменении размеров и ориентации экрана.

Отношение пикселей по умолчанию зависит от плотности дисплея. На дисплее с плотностью менее 200 точек на дюйм отношение равно 1.0. На дисплеях с плотностью от 200 до 300 точек на дюйм отношение равно 1.5. Для дисплеев с плотностью более 300 точек на дюйм отношение представляет собой целостный пол (плотность / 150 точек на дюйм). Обратите внимание, что коэффициент по умолчанию равен true только тогда, когда масштаб viewport равен 1. В противном случае соотношение между пикселями CSS и пикселями устройства зависит от текущего уровня масштабирования.

Ширина Viewport и ширина экрана

Сайты могут устанавливать свой viewport на определенный размер. Например, определение «width=320, initial-scale=1» может использоваться для точного размещения на маленьком дисплее телефона в портретном режиме. Это может вызвать проблемы, когда браузер не отображает страницу большего размера. Чтобы исправить это, браузеры, если необходимо, увеличат ширину окна просмотра, чтобы заполнить экран по заданной шкале. Это особенно полезно для устройств с большим экраном, таких как iPad. (Аллен Пайк Выбор видового экрана для IPad сайтов имеет хорошее объяснение для веб-разработчиков.)

Для страниц, задающих начальный или максимальный масштаб, это значит, что свойство width фактически переводит в минимальную ширину viewpoer. Например, если ваш макет должен иметь ширину не менее 500 пикселей, вы можете использовать следующую разметку. Когда экран шириной более 500 пикселей, браузер будет расширять область просмотра (а не увеличивать), чтобы она соответствовала экрану:

<meta name="viewport" content="width=500, initial-scale=1">

Другими доступными атрибутами являются minimum-scalemaximum-scale, и user-scalable. Эти свойства влияют на начальный масштаб и ширину, а также ограничивают изменения уровня масштабирования.

Не все мобильные браузеры обрабатывают изменения ориентации таким же образом. Например, Mobile Safari часто просто увеличивает масштаб страницы при смене с вертикальной ориентации на горизонтальный, вместо того, чтобы выкладывать страницу так, как если бы она была первоначально загружена в "ландшафт". Если веб-разработчики хотят, чтобы их настройки масштаба оставались неизменными при переключении ориентации на iPhone, они должны добавить значение maximum-scale, чтобы предотвратить это масштабирование, которое иногда имеет нежелательный побочный эффект, который мешает пользователям изменять масштаб:

<meta name="viewport" content="initial-scale=1, maximum-scale=1">

Общие размеры viewport для мобильных и планшетных устройств

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

Спецификации

Спецификация Статус Комментарий
CSS Device Adaptation
Определение '<meta name="viewport">' в этой спецификации.
Рабочий черновик В ненормативном порядке описывается элемент Viewport META

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

Метки документа и участники

 Внесли вклад в эту страницу: yuri_spivak, vitalyster, ioooooi1
 Обновлялась последний раз: yuri_spivak,