С момента выпуска двух впечатляющих мобильных операционных систем, iPhone и Android, в интернет-мире появился новый термин — WebApp (означающий WEB-приложение, работающее на высококлассных мобильных устройствах).
Все разработчики знают, что в системах высококлассных смартфонов есть два типа приложений: один — нативное (основанное на операционной системе) APP; другой — WebApp, работающее в браузере высококлассных телефонов. В этой статье мы сосредоточимся на последнем.
I. Связанное с META/LINK:
1. Отключение транскодирования Baidu
Когда вы открываете веб-страницу через Baidu Mobile, Baidu может транскодировать вашу веб-страницу и вставлять свою рекламу на вашу страницу, что действительно отвратительно. Однако мы можем использовать этот метатег, чтобы отключить это:
<meta http-equiv="Cache-Control" content="no-siteapp" />
Связанные ссылки:Заявление о транскодировании SiteApp
2. Заголовок после добавления на главный экран (iOS)
<meta name="apple-mobile-web-app-title" content="标题">
3. Включение полноэкранного режима WebApp (iOS)
Когда сайт добавлен на главный экран и затем запускается нажатием, адресную строку можно скрыть (этот эффект не возникает при входе через перенаправление браузера или при вводе ссылки).
<meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-touch-fullscreen" content="yes" />
PS: Однако после тестирования на моём собственном iPhone 5S установка "apple-touch-fullscreen" бесполезна. Если вы знаете почему, пожалуйста, сообщите нам в комментариях внизу.
4. Установка цвета фона строки состояния (iOS)
Настройка цвета фона строки состояния действует только когда задано "apple-mobile-web-app-capable" content="yes".
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
Параметры content:
- default: фон строки состояния белый.
- black: фон строки состояния чёрный.
- black-translucent: фон строки состояния полупрозрачный. Если установлено default или black, содержимое веб-страницы начинается от нижней границы строки состояния. Если установлено black-translucent, содержимое веб-страницы заполняет весь экран, а верхняя часть будет перекрыта строкой состояния.
6. Распознавание номеров мобильных телефонов на мобильных устройствах (iOS)
В iOS Safari (в других браузерах и Android — нет) числа, похожие на телефонные номера, превращаются в телефонные ссылки, например:
- 7-значные числа, например: 1234567
- Числа со скобками и знаками плюс, например: (+86)123456789
- Числа с двойными дефисами, например: 00-00-00111
- 11-значные числа, например: 13800138000
Могут быть и другие типы чисел, которые также распознаются. Мы можем отключить автоматическое распознавание телефонных номеров с помощью следующего meta:
<meta name="format-detection" content="telephone=no" />
Но иногда после отключения автоматического распознавания телефонных номеров вы можете захотеть, чтобы определённые телефонные номера при долгом нажатии открывали функции набора номера и SMS на iPhone. Для этого можно использовать следующие способы:
(2) Включить функцию телефонного звонка:
<a href=”tel:123456″>123456</a>
(3) Включить функцию SMS:
<a href=”sms:123456″>123456</a>
7. Распознавание email на мобильных устройствах (Android)
Как и при распознавании номеров телефонов, на Android распознаются строки, соответствующие формату email. Мы можем использовать следующий meta, чтобы отключить автоматическое распознавание email:
<meta content=”email=no” name=”format-detection” />
Аналогично мы также можем использовать атрибуты тега, чтобы включить функцию всплывающего меню отправки письма при долгом нажатии на адрес электронной почты:
<a mailto:dooyoe@gmail.com">dooyoe@gmail.com</a>
8. Добавить Smart App Banner (iOS 6+ Safari)
<meta name=”apple-itunes-app” content=”app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL”>
9. Анимация запуска веб-приложения iOS
Поскольку экран запуска iPad не включает область строки состояния, из изображения запуска нужно вычесть размер, соответствующий направлению области строки состояния:20px; соответственно, на устройствах Retina вычитайте40pxиз размера.
<!-- iPhone --> <link href="apple-touch-startup-image-320x460.png.html" media="(device-width: 320px)" rel="apple-touch-startup-image"> <!-- iPhone (Retina) --> <link href="apple-touch-startup-image-640x960.png.html" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"> <!-- iPad (portrait) --> <link href="apple-touch-startup-image-768x1004.png.html" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image"> <!-- iPad (landscape) --> <link href="apple-touch-startup-image-748x1024.png.html" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image"> <!-- iPad (Retina, portrait) --> <link href="apple-touch-startup-image-1536x2008.png.html" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"> <!-- iPad (Retina, landscape) --> <link href="apple-touch-startup-image-2048x1496.png.html" media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
（landscape：横屏 | portrait：竖屏）
10. Значок приложения после добавления на главный экран
Укажите путь к значку для веб-приложения после его добавления на главный экран. Есть два немного отличающихся способа:
<!-- 设计原图 --> <link href="short_cut_114x114.png.html" rel="apple-touch-icon-precomposed"> <!-- 添加高光效果 --> <link href="short_cut_114x114.png.html" rel="apple-touch-icon">
- apple-touch-icon: В iOS 6 и более ранних версиях к значку автоматически добавляется эффект подсветки (начиная с iOS 7 используется стиль плоского дизайна).
- apple-touch-icon-precomposed：Используйте "значок в оригинальном дизайне"
Эффект:
Размер значка:
Вы можете указать атрибут size, чтобы предоставлять разные значки для разных устройств (но обычно нам нужно предоставить только значок размером 114 x 114 pixels).
Официальные инструкции приведены ниже
Создавайте значки приложения разных размеров для разных устройств. Если вы создаёте универсальное приложение, вам нужно предоставить значки приложения всех четырёх размеров.
Для iPhone и iPod touch требуются оба этих размера:
- 57 x 57 pixels
- 114 x 114 pixels (высокое разрешение)
Для iPad требуются оба этих размера:
- 72 x 72 пикселя
- 144 x 144 (высокое разрешение)
11. Предпочитайте последнюю версию IE и Chrome
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
II. HTML/CSS
1. Отключите автоматическую капитализацию первой буквы на клавиатуре iOS
В iOS по умолчанию на клавиатуре включена автоматическая капитализация. Если вы не хотите включать эту функцию, можно сделать следующее:
<input type="text" autocapitalize="off" />
2. Отключите автокоррекцию ввода в iOS
Подобно автоматической капитализации по умолчанию для английского ввода, в iOS также есть функция, при которой метод ввода по умолчанию включает автокоррекцию вводимого содержимого. Это часто требует от пользователей выполнять действие дважды. Если вы не хотите, чтобы эта функция была включена, мы можем отключить её с помощью атрибута тега input:
<input type="text" autocorrect="off" />
3. Отключите масштабирование текста
Когда мобильное устройство переключается между альбомной и портретной ориентацией, размер текста пересчитывается и масштабируется соответствующим образом. Когда нам это не нужно, мы можем отключить это:
html {
-webkit-text-size-adjust: 100%;
}
Обратите внимание, что это свойство было удалено на стороне ПК. Чтобы это свойство работало на мобильных устройствах, необходимо задать `meta viewport`.
4. Как убрать внутреннюю тень у полей ввода на мобильных устройствах
В iOS поля ввода по умолчанию имеют внутреннюю тень, но её нельзя убрать с помощью box-shadow. Если тень вам не нужна, её можно отключить так:
input,
textarea {
border: 0; /* 方法1 */
-webkit-appearance: none; /* 方法2 */
}
5. Быстрая инерционная прокрутка
Давайте сначала рассмотрим историю инерционной прокрутки в мобильных браузерах:
- В первые дни мобильные браузеры не поддерживали полосы прокрутки у элементов, отличных от body, поэтому обычно использовался iScroll.
- Android 3.0/iOS решили проблему прокрутки для элементов, отличных от body, но полоса прокрутки была невидимой, а в iOS прокручивать можно было только двумя пальцами.
- Android 4.0 решил проблему невидимой полосы прокрутки и добавил быструю инерционную прокрутку, но позже эта функция была удалена.
- Начиная с iOS 5.0, проблема невидимой полосы прокрутки была решена и была добавлена быстрая инерционная прокрутка.
В iOS, если вы хотите, чтобы у элемента был эффект прокрутки, похожий на нативный, можно сделать так:
.xxx {
overflow: auto; /* auto | scroll */
-webkit-overflow-scrolling: touch;
}
PS: После использования iScroll я понял, что он не очень хорош и имеет странные баги. Здесь я рекомендую другой — iDangero Swiper. Этот плагин объединяет мощные возможности скольжения/прокрутки (поддерживает 3D), а также имеет встроенную полосу прокрутки с инерционной прокруткой. Официальный адрес:
http://www.idangero.us/sliders/swiper/index.php
6. Отключение выделения содержимого на мобильных устройствах
Если вы не хотите, чтобы пользователи выделяли содержимое на странице, это можно отключить в CSS:
.user-select-none {
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all （移动端不需要） */
-ms-user-select: none; /* IE 10+ */
}
7. Удаление эффекта подсветки при касании на мобильных устройствах
При работе с мобильными страницами вы заметите, что все теги a при нажатии или все элементы с псевдоклассом :active по умолчанию показывают рамку подсветки в активном состоянии. Если вы не хотите эту подсветку, её можно глобально отключить следующим способом CSS:
html {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
Но этот метод не работает на устройствах Samsung. Компромисс — заменить теги a, которые не являются настоящими навигационными ссылками, на другие теги, что может решить эту проблему.
8. Как отключить сохранение или копирование изображений (iOS)
Обычно, когда вы долго нажимаете на изображение (img) на телефоне или планшете, появляются опции «Сохранить изображение» или «Скопировать изображение». Если вы не хотите, чтобы пользователи это делали, это можно отключить следующими способами:
img { -webkit-touch-callout: none; }
Источник: http://www.cnblogs.com/WhiteCusp/p/4502961.html