12 трюков html5 для мобильных устройств

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

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

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

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

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

full-screen-mobile

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

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

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

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

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

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

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

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

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

full-screen-web-app

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

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

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

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

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

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

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

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

type=number

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

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

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

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

windows-ie-metro

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

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

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

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

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

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

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

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

content-editable

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

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

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

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

safari-tint

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

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

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

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

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

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

windows-phone-home-screen-name

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

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

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

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

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

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

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

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

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

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

zombie-tab-safari

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

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

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

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

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

2 thoughts on “12 трюков html5 для мобильных устройств

  1. Евгений

    К сожалению, мне пока не известен способ указания названия ярлыка для Chrome на Android.
    Нужно добавить manifest.json в корень сайта. Там можно определить полное название, краткое название, значок (может быть отличным от favicon), внешний вид (minimal UI — а ля application)… Смотрите тут: https://developer.mozilla.org/ru/docs/Web/%D0%9C%D0%B0%D0%BD%D0%B8%D1%84%D0%B5%D1%81%D1%82

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *