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

1. 01. Создание полноэкранного опыта
2. 02. Создание веб-приложения на главном экране
3. 03. Холст высокого разрешения
4. 04. Истинно числовое текстовое поле
5. 05. Отзывчивый веб-дизайн и Windows 8
6. 07. Богатый редактор
7. 08. Тон сафари
8. 09. Имя значка главного экрана
9. 10. Живые плитки для Windows Phone
10. 11. Вкладка Зомби для iOS
11. 12. Обращайтесь с осторожностью

Мобильный Интернет - это странный мир: десятки браузеров, версий, размеров экрана, недокументированных функций, ошибок и новых проблем. Вот почему в некоторых ситуациях нам необходимо преодолеть некоторые ограничения для достижения наших целей. Если вы изучите по крайней мере три новых трюка, читая эту статью, моя цель будет достигнута. Чтобы проверить эти трюки на вашем мобильном устройстве просто откройте этот набор тестов ,

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 для Android, BlackBerry OS 10 и Amazon Silk (браузер, разработанный для Kindle Fire) мы можем использовать стандарт Полноэкранный API от W3C.

iPhone на ios, браузер Android и Chrome на Android в полноэкранном режиме с различными реализациями. в IE11 для Windows Phone пользователь должен утвердить полноэкранный режим

Как вы уже знаете, некоторые браузеры по-прежнему работают с префиксами, поэтому для этого нам понадобится мультивендорный код:

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, запрашивающего минимальный пользовательский интерфейс из Safari для портрета и вообще без пользовательского интерфейса в альбомной ориентации. Этот режим недоступен на IPad ,

Чтобы включить режим минимального пользовательского интерфейса, просто используйте:

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

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

Чтобы определить, включен ли минимальный режим пользовательского интерфейса:

@media (высота устройства: 568 пикселей) и (высота: 529 пикселей), (высота устройства: 480 пикселей) и (высота: 441 пикселей) {/ * минимальный пользовательский интерфейс активен * /}

02. Создание веб-приложения на главном экране

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

<! - для стиля ios 7, значок мультиразрешения 152x152 -> <meta name = "apple-mobile-web-app-based" content = "yes"> <meta name = "apple-mobile-web- app-status-barstyle "content =" black-translucent "> <link rel =" apple-touch-icon "href =" icon-152.png "> <! - для Chrome на Android, мульти-разрешение, значок 196x196 -> <meta name = "с поддержкой мобильного веб-приложения" content = "yes"> <link rel = "ярлык" размеры = "196x196" href = "icon-196.png">

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

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

03. Холст высокого разрешения

Canvas API - это графический интерфейс на основе растровых изображений, который работает как изображение, загруженное из файла. Поэтому, если вы создадите холст с шириной = 200, он создаст 200-пиксельное изображение. На документе он будет нарисован с шириной в 200 CSS-пикселей, независимо от разрешения.

Это означает, что на 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); </ Скрипт>

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

04. Истинно числовое текстовое поле

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

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

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

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

Вы также можете использовать этот трюк с type = "password", чтобы получить цифровую клавиатуру для текстового поля PIN.

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

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

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

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

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

Чтобы решить эту проблему, мы можем использовать объявление CSS Viewport для медиа-запроса, например:

экран @media only и (max-width: 400px) {@ -ms-viewport {width: 320px; }}

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

Однако вы можете не знать, что средство выбора даты и времени все еще доступно в тех браузерах, которые используют type = datetime-local , поскольку это изменение не было должным образом объявлено или задокументировано поставщиками браузера.

<input type = "datetime-local">

07. Богатый редактор

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

Когда пользователь нажимает на эти элементы, появляется виртуальная клавиатура, и пользователь сможет редактировать ее, даже если она включает в себя расширенный HTML - например, добавление новых элементов списка с помощью клавиши Enter Virtual. Чтобы сохранить обновления, вы должны проверить атрибут innerHTML элемента.

С ContentEditable мы можем создать богатый редактор для iOs, Android, Windows Phone и других устройств, используя виртуальную клавиатуру на любом элементе HTML

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

<ul contenteditable> <li> статический элемент в hTML </ ul>

08. Тон сафари

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

тело {/ * для оттенка сафари * / background-color: синий; / * для цвета фона тела документа * / background-image: линейный градиент (снизу, красный 0%, красный 100%); }

Если фон вашего тела красный, пользовательский интерфейс Safari на iPhone будет окрашивать панели инструментов в тот же цвет. Совет 08 описывает трюк для изменения цвета (справа)

09. Имя значка главного экрана

Когда вы добавляете веб-сайт на домашний экран на iOS, Chrome на Android или прикрепляете веб-сайт к плитке на Windows Phone, ваш HTML-контент <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 программным способом.

В Windows 8+ и Windows Phone 8.1+ пользователь может прикрепить веб-сайт к начальному экрану. Мы можем настроить внешний вид и обновить его содержимое с помощью мета-тегов.

10. Живые плитки для Windows Phone

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

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

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

Вы можете создать метатеги для своей Live Tile, используя онлайн-инструмент Build My Pinned site. Если у вас есть канал RSS, он импортирует его и даст вам код для копирования и вставки

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

<meta name = "msapplication-badge" content = "quency = 60; polling-uri = http: // host / badge.xml "> <meta name =" msapplication-уведомление "content = "quency = 30; polling-uri = http: // host / live.xml ">

Есть хороший Live Tile создатель доступны на сайте Windows, и Плагин WordPress доступно, что сделает работу за вас.

11. Вкладка Зомби для iOS

Браузеры на мобильных устройствах могут выглядеть как их двоюродные братья на настольном компьютере, но их поведение далеко не одинаково. Рассмотрим Safari для iPad: в нем есть вкладки. Однако если вы откроете три вкладки в Facebook, Twitter и Gmail, вы будете получать обновления только с активной вкладки. Каждая неактивная вкладка заморожена. Это означает, что JavaScript не выполняется и нет способа получать обновления, к которым мы привыкли на рабочем столе.

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

Некоторые мобильные браузеры, такие как Safari на iPad, выглядят как настольные браузеры, но активна только активная вкладка. Взлом Zombie Tab решает эту проблему

Для взлома необходимо использовать классический метатег обновления, который запускает операцию перезагрузки страницы. Когда страница заморожена, Safari все равно сохранит этот метатег и восстановит это окно. Но нам также нужно приостановить операцию перезагрузки, пока мы находимся в активном окне. Для этого мы сдвигаем метатег обновления каждые x секунд (код, который не срабатывает при замораживании).

<meta http-equ = "refresh" content = "2"> <script> var mr = document.queryselector ("meta"); setInterval (function () {mr.content = mr.content;}, 1000); </ Скрипт>

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

12. Обращайтесь с осторожностью

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

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

Слова : Максимилиано Фиртман Иллюстрация : Бен Фернли

Эта статья первоначально появилась в сетевом выпуске журнала 256.

Похожие

Комментарии