7 июля 2016 г.

Viewport - настройка области просмотра

пруф гугл


На страницах, оптимизированных для мобильных устройств, в блоке <head> должен присутствовать метатег viewport следующего содержания:

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

При указании размеров в стилях (например, width: 100px) используются пиксели CSS. Отношение пикселей CSS к аппаратно-независимым пикселям является коэффициентом масштабирования страницы.

Страницы для настольных ПК на мобильных устройствах
Если на странице не настроена область просмотра, мобильные браузеры для ее отображения используют резервную ширину (от 800 до 1024 пикселей CSS). Масштаб страницы изменяется таким образом, чтобы отобразить ее целиком на экране. Для взаимодействия с ней пользователям приходится увеличивать масштаб.

Слева: поворот iPhone 5, атрибут width=device-width, ширина в горизонтальной ориентации составляет 320 пикселей.
Справа: поворот iPhone 5, атрибут width=device-width, initial-scale=1, ширина в горизонтальной ориентации составляет 568 пикселей.
Для использования адаптивной области просмотра ваши страницы должны быть предназначены для работы с разной шириной. Рекомендации см. в статье Определение размеров контента для области просмотра.

http://atomicdesign.bradfrost.com/table-of-contents/

Комментариев нет:

Отправить комментарий