Вёрстка: Мета-теги для адаптивной вёрстки

Мета-теги для адаптивной вёрстки: viewport, X-UA-Compatible, HandheldFriendly

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

# viewport - основной мета тег для адаптивности
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>

Устаревшие теги:

<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="HandheldFriendly" content="true"/>

Мета-тег viewport

Атрибут width определяет ширину области просмотра в пикселях (от 200 до 10000) или равной ширине страницы в соответствии с размером экрана (константа device-width).

Если значение не задано, по умолчанию устанавливается – в мобильном Safari = 980px, Opera = 850px, Android WebKit = 800px, IE = 974px

Атрибут height определяет высоту области просмотра в пикселях (от 233 до 10000 пикселей) или равной высоте страницы в соответствии с размером экрана (константа device-height).

Атрибут initial-scale определяет начальный масштаб страницы в единицах от 0.1 до 1.0

Атрибут user-scalable определяет доступность масштабирования страницы пользователем

Атрибут minimum-scale определяет минимальный масштаб области просмотра в единицах от 0.1 до 1.0

Атрибут maximum-scale определяет максимальный масштаб области просмотра в единицах от 0.1 до 1.0

Атрибут shrink-to-fit используется для указания, может ли страница уменьшаться в размере, чтобы поместиться на экране мобильного устройства, если ширина контента превышает ширину экрана.

Когда атрибут shrink-to-fit установлен в значение yes, страница может быть уменьшена в размере так, чтобы все ее содержимое поместилось на экране мобильного устройства. Если же атрибут установлен в значение no, то страница не будет уменьшаться в размере, даже если ее содержимое превышает ширину экрана, и пользователь должен будет использовать горизонтальную прокрутку, чтобы просмотреть всю страницу.

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
// для приведённого примера: установить ширину области просмотра равной ширине экрана, изначально не масштабировать страницу, запретить пользователю масштабировать страницу

Мета-тег X-UA-Compatible

Мета-тег указывает только для IE (до 11 версии) наиболее совместимый режим работы: edge

Атрибут chrome=1 устарел с 2014 года.

В целом этот мета-тег устарел.

<meta http-equiv="X-UA-Compatible" content="IE=edge"/>

Мета-тег HandheldFriendly

Мeta-тег определяет оптимизирована ли страница сайта под мобильные устройства на Palm и Blackberry (в браузере AvantGo)

Распознаётся многими другими мобильными браузерами.

В целом этот мета-тег устарел, но используется по инерции.

<meta name="HandheldFriendly" content="true"/>

Мета-теги для Apple устройств

https://­developer.apple.com­/library/archive/­documentation/­AppleApplications/­Reference/­SafariHTMLRef/­Articles/­MetaTags.html

Устанавливает, будет ли веб-приложение работать в полноэкранном режиме.

<meta name="apple-mobile-web-app-capacity" content="yes">