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

1. HTML5 на полный экран

В браузерах android — встроенном до версии 4.3 и других, например Chrome, существует только одно решение данной проблемы. Ширина и высота документа должна соответствовать экрану устройства, тогда нужного эффекта мы можем добиться следующим js кодом:

[js]window.addEventListener("load", function() { window. scrollTo(0, 0); });[/js]

Google maps использует этот способ для полноэкранного отображения своего контента. Так же, можно легко избежать появления адресной строки при скроле пальцами:

[js]document.addEventListener("touchmove", function(e) { e.preventDefault() });[/js]

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

Браузеры iPhone iOS, Android, Chrome под Android имеют разные реализации полноэкранного отображения содержимого. IE11 на Windows Mobile еще и требует разрешения на переход в полноэкранных режим.

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

[js]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();
}[/js]

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

На iPhone, начиная с iOS 7.1, Apple использует атрибут minimal-ui мета-тега viewport, который позволяет отобразить минимальные элементы пользовательского элемента при портретной ориентации и скрыть все элементы пользовательского интерфейса при альбомной ориентации. Функция недоступна на iPad.
Пример использования:

[html]<meta name="viewport" content="width=devicewidth, minimal-ui">[/html]

При использовании данной возможности, нужно уделить особое внимание области вдоль краев.

Как определить активацию minimal-ui:

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

2. Полноэкранный ярлык на домашнем экране

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

[html]<!— for ios 7 style, multi-resolution icon of 152×152 —>
<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 196×196 —>
<meta name="mobile-web-app-capable" content="yes">
<link rel="shortcut icon" sizes="196×196" href="icon-196.png">[/html]

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

3. Canvas высокого разрешения

Canvas API — bitmap-ориентированный интерфейс, позволяющий работать с изображениями, загруженными из файла. Например, если создать canvas с шириной 200, мы получим изображение шириной 200 точек и в документе оно будет отображено с шириной 200 css-точек, независимо от разрешения.

Это означает, что на iPhone 5S изображение будет отображено шириной 400 реальных точек экрана, а на Nexus 5 — 600 точек.

Если вы хотите создать изображение высокого разрешения, можно просто увеличить оригинал вдвое:

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

Обратите внимание, что увеличение размера canvas, так же, увеличивает использование памяти и процессора при работе с ними.

4. Цифровая клавиатура для цифровых полей

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

Для элемента type=number, Android и Windows Phone отображают полную цифровую клавиатуру, а iOS только цифры.

Если добавить атрибут pattern=»[0-9]*», в iOS мы получим полную цифровую клавиатуру, как на остальных платформах:

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

Этот же трюк можно использовать и для type=password, для определенных полей:

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

5. Отзывчивый веб и Windows 8

Если вы сталкиваетесь с адаптивным веб-дизайном, вы используете мета-тег viewport и набор css правил для разных размеров экрана. Однако, для windows 8.x с Internet Explorer, запущенным в полноэкранном (metro) режиме, нужно еще немного волшебства.

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

Для избежания такого поведения, мы можем использовать css viewport:

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

6. Выбор даты и времени

Используя поле <input type=datetime>, мы на большинстве современных браузеров получим диалог выбора даты и времени. Так было и на мобильных устройствах до появления iOS 7 и Chrome 26 на Android. Начиная с этих версий, браузеры обрабатывают его как простое текстовое поле.

Разработчики этих браузеров не потрудились нормально документировать свойство type=datetime-local, которое заставляет выводить диалог выбора даты и времени:

[html]<input type="datetime-local">[/html]

7. Расширенное редактирование

Стандарт html5 включает новый атрибут элементов: ContentEditable. Он может применяться к любому html элементу, включая <div>, <table> и <ul>.

При пользовательской активации такого элемента, появляется виртуальная клавиатура и он становится редактируемым. Для сохранения изменений, нужно обрабатывать атрибут innerHTML элемента.

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

[html]<ul contenteditable>
<li>static item in the hTML
</ul>[/html]

8. Все оттенки Safari

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

Есть простой способ обойти эту особенность и заменить цвет фона на любой другой:

[css]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%);
}[/css]

9. Название ярлыка на домашнем экране

При добавлении ярлыка сайта на домашний экран мобильного устройства, его наименование берется из тега <title>. Из-за особенностей SEO, зачастую в этом теге может быть совсем не то, что мы хотим показать пользователю.

Есть способ задать название ярлыка на домашнем столе мобильного устройства.

Недокументированный тег Safari на iOS:

[html]<meta name="apple-mobile-web-app-title" content="Myname">[/html]

Для Windows Phone и планшетов на Windows 8.x можно указать название ярлыка используя специальный тег application-name:

[html]<meta name="application-name" content="Myname">[/html]

К сожалению, мне пока не известен способ указания названия ярлыка для Chrome на Android.

10. Живые заголовки на Windows Phone

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

Для этого необходимо несколько мета-тегов. Для начала рассмотрим добавление значка:

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

Для «оживления», мы можем использовать Badge Polling URI (начиная с IE10) или Notification Polling URI (начиная IE11).

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

В обоих случаях, мы можем указать частоту обновления информации:

[html]<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">[/html]

Для упрощения работы с живыми плитками, вы можете использовать Live Tile creator от Microsoft или специальный плагин для WordPress.

11. Вкладки без присмотра

Мобильные браузеры выглядят как их старшие собратья, но ведут себя, зачастую, совсем не так. Пример: iOS Safari и его вкладки. Если открыть три вкладки: хабр, gmail и вконтакте, динамическое содержимое будет обновляться только на одной, активной в данный момент вкладке. Никакие js скрипты не будут выполняться на фоновых вкладках, в отличие от десктопных браузеров.

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

Данный способ основан на обычном мета-теге refresh, который определяет перезагрузку страницы. Safari обрабатывает этот мета-тег даже для фоновых вкладок. И нам осталось только определить интервал перезагрузки страницы.

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

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

12. После прочтения сжечь

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

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