Опубликовано автор в категориях Верстальщику.

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

01. Работаем в полноэкранном режиме

На браузере Android, который является браузером по умолчанию на Android до версии 4.3, и отличается от Chrome – единственной возможностью использовать страницы с высотой равной высоте экрана устройства является использование кода, который прячет URL-панель.

window.addEventListener("load", function() { window. scrollTo(0, 0); });

Google Maps используют этот трюк для эмуляции полноэкранного режима в этом браузере. Если использовать код ниже осторожно, то также мы можем исключит повторное появление строки с URL, когда пользователь касается экрана и проводит пальцем вверх или вниз.

document.addEventListener("touchmove", function(e) { e.preventDefault() });

В Google Chrome, Firefox OS, Firefox for Android, BlackBerry OS 10 and Amazon Silk (браузер для Kindle Fire) мы можем использовать стандартный Fullscreen API от W3C.

Но, ка вы знаете, некоторые браузеры до сих пор используют вендорные префексы, поэтому нам нужно использовать специальный код:

var body = document.documentElement;
if (body.requestFullscreen) {
  body.requestFullscreen();
} else if (body.webkitrequestFullscreen) {
  body.webkitrequestFullscreen();
} else if (body.mozrequestFullscreen) {
  body.mozrequestFullscreen();
} else if (body.msrequestFullscreen) {
  body.msrequestFullscreen();
}

Важно помнить, что мы должны запрашивать полноэкранный режим только в ответ на действие пользователя, например после касания к экрану.
Apple в качестве решения для iPhone, начиная с версии iOS 7.1, предлагает использовать специальный атрибут у мета-тега viewport, который запрашивает минимальный UI у Safari в портретной ориентации и не запрашивает UI вовсе в альбомной ориентации. Этот режим не доступен на iPad.
Для того, чтобы активировать режим минимального UI просто используйте такой код:

<meta name="viewport" content="width=devicewidth, minimal-ui">

Если вы включили этот режим, то вам нужно помнить о возможных проблемных зонах вблизи полей экрана. Здесь более детально.

Применять стили в зависимости от включенного\выключенного минимального режима можно с помощью такого медиа-запроса:

@media (device-height: 568px) and (height: 529px),
(device-height: 480px) and (height: 441px) {
/* minimal-ui is active */
}

02. Устанавливаем иконку приложения на домашний экран устройства.

На iOS, для iPhone и iPad, и в Chrome для Android мы можем использовать полноэкранный режим после того, как пользователь установил иконку вашего сайта на домашний экран. Приложение будет запущенно без контрольных элементов браузера. Для того, чтобы разрешить пользователю это сделать нам нужно позаботиться об иконке домашнего экрана, используя такие мета-теги в документе:

<!-- for ios 7 style, multi-resolution icon of 152x152 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-barstyle" content="black-translucent">
<link rel="apple-touch-icon" href="icon-152.png">
<!-- for Chrome on Android, multi-resolution icon of 196x196 -->
<meta name="mobile-web-app-capable" content="yes">
<link rel="shortcut icon" sizes="196x196" href="icon-196.png">

На Firefox OS и Firefox для Android мы тоже можем выносить наши сайты ка приложение на домашний экран, создавая JSON манифест и используя JavaScript API. Здесь официальная документация.

03. Canvas в высоком разрешении

Canvas API может использоваться для рисования пиксельной графики с помощью скриптов. Если вы создадите с помощью Canvas изображение шириной в 200px, то оно и будет выведено в таком размере без масштабирования.
Но, как и любая графика основанная на пикселях, на iPhone 5S, картипка шириной в 200 пикселей будет масштабирована в 400, на Nexus 5 до 600, в зависимости от плотности пикселей, при этом с последствиями для качества. Если вы хотите, чтобы потери качества были минимальными, то изначально подготовьте картинку для устройств с большей плотностью пикселей, а потом используйте такой трюк:

<canvas width="400" height="400" style="width: 200px; height: 200px"></canvas>
<script>
document.queryselector("canvas").getContext("2d").scale(2, 2);
</script>

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

04. Действительно номерной ввод

Я уверен, что вам уже знакомы специальные типы полей ввода HTML5, например type=email, для которого будет показана специальная клавиатура на сенсорных устройствах. Если на Android и Windows Phone вы получите действительно только номерную клавиатуру для поля ввода с типом type=number, то для iOS этого может не случится.

Но если вы добавите к полую атрибут pattern="[0-9]*", то вы получите номерную клавиатуру на iOS и на других системах:

<input type="number" pattern="[0-9]*">

Вы также можете использовать этот трюк с паролем, если нужно вводить только номера:

<input type="password" pattern="[0-9]*">

05. Отзывчивый дизайн в Windows 8

Если вы работали над отзывчивыми вебсайтами ранее, то вы склонны думать, что достаточно указать мобильный мета-тег viewport и назначить разные стили в зависимости от брикпоинтов, чтобы достичь желаемого. В принципе — да, но есть еще один вариант, где нужно немного более: Windows 8.x с Internet Explorer который работает в полномэкранном режиме (ранее известен как Metro mode).

В Windows 8 и 8.1 a сайт открытый в этом браузере, делить экран с другими приложениями в полноэкранном режиме, включая классический рабочий стол. В этом случае, и когда доступная ширина меньше чем 1024 пикселя, IE будет применять мобильное поведение которое будет масштабировать сайт, не используя при этом ваш код для мобильных.

В этом случае вам нужно использовать специальный код при объявлении медиа-запросов:

@media only screen and (max-width: 400px) {
  @-ms-viewport { width: 320px; }
}

06. Где же диалог выбора даты и времени?

Вы, наверное знаете, что если использовать

<input type=datetime>

то вы получите диалог выбора даты и времени в большинстве современных настольных браузеров. Так было и в мобильных устройствах до выхода iOS 7 и Chrome 26 для Android. С выходом этих версий, данные поля стали интерпретироваться как простые текстовые поля ввода.
Но и возможности с выбором даты и времени с помощью диалога также доступны для этих версий, только нужно использовать type=datetime-local, странно, но это не анонсировалось или документировалось в спецификациях браузеров.

07. Визуальный редактор

В HTML5 есть булевой атрибут для HTML элементов: ContentEditable. Мы можем использовать этот атрибут для любого HTML элемента, включая div, table или ul.

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

На iOS пользователь даже сможет использовать некоторые расширенные опции форматирования, как жирный текст, курсив или подчеркивание.

<ul contenteditable>
  <li>static item in the hTML
</ul>

08. Оттенок для Safari

Начиная iOS 7, Safari для iPhone и iPod включает возможность показывать симпатичный оттенок, который выводится за элементами UI Safari. Когда ваша страница загружается, Safari смотрит на фон вашей страницы чтобы определить оттенок. Мы не можем повлиять на этот оттенок программно или через мета-тег, но есть трюк, который позволяет определить оттенок отличный от фона страницы:

body {
  /* for safari's tint */
  background-color: blue;
  /* for the document's body background color */
  background-image: linear-gradient(to bottom, red 0%, red 100%);
}

09. Имя иконки на домашнем экране

Когда вы добавляете вебсайт на домашний экоран в iOS, Chrome для Android или прикрепляете вебсайт как тайл на Windows Phone, содержимое вашего элемента title будет использовано для имени сайта. От части из-за SEO, но мы знаем, что тайтл будет выглядеть не очень красиво на домашнем экране из-за размера.

Для Safari на iOS существует задокументированный мета-тег, который как раз помогает определить имя иконки:

<meta name="apple-mobile-web-app-title" content="Myname">

На Windows Phone и планшетах с Windows 8.x мы можем изменить название таким образом:

<meta name="application-name" content="Myname">

Пока нет возможности переопределить имя иконки для Chrome для Android.

10. Живые тайлы для Windows Phone

Пользователь может привязать вебсайт через IE к стартовому экрану Windows 8.x, эта возможность также была добавлена для последних Windows Phones. Вы можете преобразовать простой тайл домашнего экрана в Живой тайл, обновляя информацию даже, когда ваш сайт уже не открыт.

Для этого нам нужно добавить некоторые мета-теги. Давайте сначала посмотрим, что еще нам нужно сделать для иконки тайла:

<meta name="msapplication-TileImage" content="tile-background.png">
<meta name="msapplication-TileColor" content="#FF0000">

Для того, чтобы оживить тайл мы можем передать Badge Polling URI (для IE10) и/или Notification Polling URI (начиная с IE11). Первая может обновлять иконку и информацию в тайле, вторая может передавать новости и информацию, которая будет рендериться в анимации тайла. В обеих случаях мы можем определить частоту обращений за информацией:

<meta name="msapplication-badge"
 content="frequency=60;polling-uri=http://host/ badge.xml">
<meta name="msapplication-notification"
 content="frequency=30;polling-uri=http://host/ live.xml">

Вот отличный онлайн сервис для создания тайлов, и плагин для WordPress, который сделает то же самое для вас.

11. Zombie tab для iOS

Браузеры на мобильных устройствах могут выглядеть так же как и десктопные, но ведут себя они иначе. Например, Safari для iPad имеет табы как и десктопный. Но, если вы откроете три таба с Facebook, Twitter и Gmail, то вы будете получать обновления статуса только для активного таба. Каждый неактивный таб заморожен. В нем не выполняются сценарии скриптов, и вы не получаете никаких апдейтов, как это может быть на десктопе.

С трюком, описанным ниже, мы сможем вернуть жизнь подобным вкладкам? Для начала, нам нужно получать ответ от сервера, и если там есть что-то новое, то менять тайтл вкладки, чтобы сообщить об это пользователю (только для iPad), также можно использовать диалоговые окна для таких сообщений.

Хак использует классический refresh мета-тег. Когда страница заморожена, Safari будет учитывать информацию этого тега и проверять состояние вкладки. Но мы также должны не забывать останавливать эту операцию когда окно активно. Для этого мы устанавливаем таймер события для refresh мета-тега в каждые “x” секунд:

<meta http-equiv="refresh" content="2">
<script>
var mr = document.queryselector("meta"); setInterval(function() { mr.content=mr.content; }, 1000);
</script>

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

12. Используйте осторожно

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

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

Оригинал статьи: 12 HTML5 tricks for mobile

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

  • (не будет показан)