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

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

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

// мета-тег указывает только для IE (до 11 версии) наиболее совместимый режим работы: edge
// атрибут chrome=1 устарел с 2014 года
// в целом этот мета-тег устарел
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>

// м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">





Вёрстка up: 2.1 г. просмотров: 8.6k