<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

Данные значения используют в случае, если сайт будет использоваться и функционировать как мобильное приложение. Т.е

1. при загрузке страницы она не будет смасштабирована
2. страница займет всю ширину мобильного браузера
3. запрещено любое пользовательское масштабирование
4. доступен только горизонтальный и вертикальный скролл

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

Тег Meta Viewport – это незаменимый инструмент (совместно с Media Queries), если вы хотите построить интерактивный сайт. Однако, технически, для сайтов, которые не взаимодействуют с пользователем, его можно задать точно таким же образом.

Атрибут	Возможное значение	Описание
width	Целое неотрицательное значение (от 200px — 10,000px) или константа device-width.	Определяет ширину viewport. Если ширине не указана, в мобильном Safari устанавливается значение 980px, в Opera — 850px, в Android WebKit — 800px, а в IE — 974px.
height	Целое неотрицательное значение (от 223px до 10,000px) или константа deviceheight	Определяет высоту viewport. В большинстве случаев на этот атрибут можно не обращать внимание
initial-scale	Число с точкой (от 0.1 до 10). Значение 1.0 — не масштабировать	Определяет начальный масштаб страницы. Чем больше число, тем выше масштаб.
user-scalable	no или yes	Определяет, может ли пользователь изменять масштаб в окне. По-умолчанию “yes” в мобильном Safari.
minimum-scale	Число с точкой (от 0.1 до 10). 1.0 — не масштабировать	Определяет минимальный масштаб viewport. По-умолчанию “0.25” в мобильном Safari.
maximum-scale	Число с точкой (от 0.1 до 10). 1.0 — не масштабировать	Определяет максимальный масштаб viewport. По-умолчанию “1.6” в мобильном Safari.

Media Queries

Media Queries позволяют вам менять стили вашего сайта в конкретные моменты времени. Не всё содержимое сайта может корректно поместиться в узкое окно на экране мобильного устройства.

Используя Media Queries, вы можете задать специфические правила стилей для специфических показателей ширины окна. Также они позволяют применять стили на основании ориентации экрана и плотности пикселей.

Вы можете вставить Media Queries в ссылку таблицы стилей

<link rel="stylesheet" media="screen and (orientation: portrait) and (min-width: 960px), projection" href="style.css" /> 

 

Или вставить напрямую в таблицу стилей:

@media screen and (max-width: 960px) { 
/** Style Rules here **/
}

Modernizr

Modenizr – это Java-скрипт для определения свойств браузера/устройства. Браузеров много и они могут поддерживать или не поддерживать определённые свойства. Создавая сайт для мобильных устройств, вы, скорее всего, будете использовать передовые возможности CSS3 и HTML5, которые, к сожалению, не поддерживаются более старыми браузерами.

Modenizr позволяет вам задать резервные функции и представления для старых браузеров посредством добавления наборов методов и дополнительных HTML классов в тело тега.

TouchSwipe

TouchSwipe – это jQuery плагин для добавления вебсайтам тач-интерактивности. Он поддерживает набор распространённых жестов вроде Swipe, Pinch, Zoom и Scroll.

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

Иконки iOS

Первое, что вы увидите, разлочив свой iPhone (или iPad) – это иконки приложений. Помимо них iOS также отображает иконки для вебсайтов, которые были добавлены на Home-экран.

Чтобы добиться этого для своего сайта, просто добавьте следующий элемент к тегу:

<link rel="apple-touch-icon" href="favicon.ico?1393095674">
<link rel="apple-touch-icon" sizes="57x57" href="favicon.ico?1393095674/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="72x72" href="favicon.ico?1393095674/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="favicon.ico?1393095674/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="favicon.ico?1393095674/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="favicon.ico?1393095674/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="favicon.ico?1393095674/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="favicon.ico?1393095674/apple-touch-icon-152x152.png">
<link rel="dns-prefetch" href="http://seodom.org/">
<link rel="prefetch" href="http://seodom.org/css/style.css">
<link rel="prerender" href="http://seodom.org/">
<meta name="application-name" content="seodom.org"/>
<meta name="msapplication-TileColor" content="#fcfcfc"/>
<meta name="msapplication-square70x70logo" content="tiny.png"/>
<meta name="msapplication-square150x150logo" content="square.png"/>
<meta name="msapplication-wide310x150logo" content="wide.png"/>
<meta name="msapplication-square310x310logo" content="large.png"/>
<!-- Make sure the href of the link tag points to the icon you created -->
<link rel="shortcut icon" href="/favicon.ico">
<meta name="application-name" content="Build My Pinned Site" />
<meta name="msapplication-starturl" content="http://buildmypinnedsite.com" />
<meta name="msapplication-navbutton-color" content="#3480C0" />
<meta name="msapplication-window" content="width=1024;height=768" />
<meta name="msapplication-tooltip" content="Start Build My Pinned Site" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

В качестве альтернативы, вы можете удалить эти элементы, но удостоверьтесь, что иконки сохранены в корневой директории, и сопровождены префиксом apple-touch-icon-* в своём имени.

Splash Screen

Splash Screen – это первое изображение, которое видит пользователь, когда запускает приложение. Оно говорит ему, что приложение загружается. Также его часто используют как возможность подчеркнуть бренд разработчика.

Чтобы добавить Splash Screen на свой сайт, просто вставьте следующую строку в тег:

<link rel="apple-touch-startup-image" href="splash-screen.png" />

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

И хотя показ бренда при помощи Splash Screen считается несколько не комильфо, однако до тех пор, пока он хорошо спроектирован и загружается очень быстро – он может обеспечить лучший пользовательский опыт и добавить дополнительный стилистический фактор на ваш сайт.

Pin-иконка Windows 8

Windows 8 и RT также имеют возможность добавлять сайту иконку, когда он прикреплён к Home-экрану. В Windows 8 она называется Pin-иконкой.

В отличие от iOS, которая использует линк-элементы, Windows 8 использует для добавления иконок мета-теги. Вот пример:

<meta name="msapplication-TileColor" content="#000″/>
<meta name="msapplication-TileImage" content="icon.png"/>

Почему это так важно?

Ваши пользователи не могут получать лучший опыт этой веб-страницы о устройств, таких как Microsoft Surface или Windows, 8,1 ПК. Эта функция помогает им персонализировать свой Windows 8 Start Screen с их любимый сайт, как ваша.

Если вы хотите, чтобы обеспечить больше возможностей изображения для разных размеров плитки, доступных в Windows, 8.1 перейти к http://www.buildmypinnedsite.com узнать больше.

Также уведомления может помочь вам привлечь больше с пользователями и получить более частые визиты.

Заключение

Революция мобильных устройств изменила подходы к созданию вебсайтов. И как минимум те элементы, которые указаны в этой статье, должны быть включены в веб-документ, чтобы добиться хорошего отображения сайта на мобильных платформах вроде iOS и Windows 8.

Источники: gearmix.ru, html5.by, frontender.com.ua, seodom.org