What is apple mobile web app title

Мета-теги HTML для Apple Safari

Обзор html мата-тегов для браузеров Safari на платформах Mac OS X и iOS.

Apple Touch Icon

Иконка сайта в iOS на экране закладок и домашнем экране.

Иконки разных размеров указываются атрибутом sizes :

Apple Touch Icon Precomposed

Тоже самое что и apple touch icon , но с наложенными эффектами в стиле iOS с закругленными углами и т.д.

Mask Icon

Используется в MacOS при сохранении сайта на рабочий стол. Элементы SVG должны быть черного цвета, цвет задается атрибутом color .

Apple-Mobile-Web-App-Title

При добавлении сайта на домашний экран в iOS задает имя иконки.

Apple-Mobile-Web-App-Capable

В Safari iOS для закрепленных сайтов на экране «Домой» включает полноэкранный режим.

Apple-Mobile-Web-App-Status-Bar-Style

Задает стиль панели состояния при полноэкранном режиме.

Может иметь следующее значение:

default	Белый фон
black	Черный фон
black-translucent	Прозрачный фон и белый цвет иконок и шрифтов

default

black

black-translucent

Apple-Itunes-App

В iOS Safari выводит баннер с приложением в App Store.

Баннер не отобразится, если устройство не поддерживает приложение или оно недоступно для данной локали, подробнее на developer.apple.com.

Format-Detection

В iOS запрещает распознавать номера телефонов и адреса.

Источник

Safari Web Content Guide

Configuring Web Applications

A web application is designed to look and behave in a way similar to a native application—for example, it is scaled to fit the entire screen on iOS. You can tailor your web application for Safari on iOS even further, by making it appear like a native application when the user adds it to the Home screen. You do this by using settings for iOS that are ignored by other platforms.

For example, you can specify an icon for your web application used to represent it when added to the Home screen on iOS, as described in Specifying a Webpage Icon for Web Clip . You can also minimize the Safari on iOS user interface, as described in Changing the Status Bar Appearance and Hiding Safari User Interface Components , when your web application is launched from the Home screen. These are all optional settings that when added to your web content are ignored by other platforms.

Read Viewport Settings for Web Applications for how to set the viewport for web applications on iOS.

Specifying a Webpage Icon for Web Clip

You may want users to be able to add your web application or webpage link to the Home screen. These links, represented by an icon, are called Web Clips. Follow these simple steps to specify an icon to represent your web application or webpage on iOS.

To specify an icon for the entire website (every page on the website), place an icon file in PNG format in the root document folder called apple-touch-icon.png

To specify an icon for a single webpage or replace the website icon with a webpage-specific icon, add a link element to the webpage, as in:

In the above example, replace custom_icon.png with your icon filename.

To specify multiple icons for different device resolutions—for example, support both iPhone and iPad devices—add a sizes attribute to each link element as follows:

The icon that is the most appropriate size for the device is used. See the “Graphics” chapter of iOS Human Interface Guidelines for current icon sizes and recommendations.

If there is no icon that matches the recommended size for the device, the smallest icon larger than the recommended size is used. If there are no icons larger than the recommended size, the largest icon is used.

If no icons are specified using a link element, the website root directory is searched for icons with the apple-touch-icon. prefix. For example, if the appropriate icon size for the device is 58 x 58, the system searches for filenames in the following order:

Note: Safari on iOS 7 doesn’t add effects to icons. Older versions of Safari will not add effects for icon files named with the -precomposed.png suffix. See First Steps: Identifying Your App in iTunes Connect for details.

Specifying a Launch Screen Image

On iOS, similar to native applications, you can specify a launch screen image that is displayed while your web application launches. This is especially useful when your web application is offline. By default, a screenshot of the web application the last time it was launched is used. To set another startup image, add a link element to the webpage, as in:

In the above example, replace launch.png with your startup screen filename. See the “Graphics” chapter of iOS Human Interface Guidelines for current launch screen sizes and recommendations.

Adding a Launch Icon Title

On iOS, you can specify a web application title for the launch icon. By default, the tag is used. To set a different title, add a meta tag to the webpage, as in:

In the above example, replace AppTitle with your title.

Hiding Safari User Interface Components

On iOS, as part of optimizing your web application, have it use the standalone mode to look more like a native application. When you use this standalone mode, Safari is not used to display the web content—specifically, there is no browser URL text field at the top of the screen or button bar at the bottom of the screen. Only a status bar appears at the top of the screen. Read Changing the Status Bar Appearance for how to minimize the status bar.

Set the apple-mobile-web-app-capable meta tag to yes to turn on standalone mode. For example, the following HTML displays web content using standalone mode.

You can determine whether a webpage is displaying in standalone mode using the window.navigator.standalone read-only Boolean JavaScript property. For more on standalone mode, see apple-mobile-web-app-capable .

Changing the Status Bar Appearance

If your web application displays in standalone mode like that of a native application, you can minimize the status bar that is displayed at the top of the screen on iOS. Do so using the status-bar-style meta tag.

This meta tag has no effect unless you first specify standalone mode as described in Hiding Safari User Interface Components . Then use the status bar style meta tag, apple-mobile-web-app-status-bar-style , to change the appearance of the status bar depending on your application needs. For example, if you want to use the entire screen, set the status bar style to translucent black.

For example, the following HTML sets the background color of the status bar to black:

For more on status bar appearance, see the “UI Bars” chapter of iOS Human Interface Guidelines .

Linking to Other Native Apps

Your web application can link to other built-in iOS apps by creating a link with a special URL. Available functionality includes calling a phone number, sending an SMS or iMessage, and opening a YouTube video in its native app if it is installed. For example, to link to a phone number, structure an anchor element in the following format:

For a complete look of these capabilities, see Apple URL Scheme Reference.

Copyright © 2016 Apple Inc. All Rights Reserved. Terms of Use | Privacy Policy | Updated: 2016-12-12

Источник

HTML по стандартам

Изначально хотел назвать статью «HTML по ГОСТ`у», но потом выяснилось что у большинства программистов не было предмета «Метрология и стандартизация» и о «стандартизации», «сертификации», «унификации» не все слышали.

В i-Free я много занимаюсь разработкой веб-приложений. А поскольку их много, они разные и работают в разных условиях, то само собой приходится задумываться о стандартизации. Есть такой проект «Пуленепробиваемый HTML5» (http://html5boilerplate.com/), в котором разработчики решили создать идеальный шаблон странички. Он мне очень нравился, и все свои проекты я начинал именно с него. Но, исправляя баг за багом, делая все новые и новые приложения, я пришел к выводу, что многого в нем не хватает. В этой статье я хотел бы рассказать о том, что обычно пропускают при написание страничек и веб-приложений и показать, чем и зачем я прокачал свой шаблон пустой странички.

Указатель на язык:

Это идет в паре с hyphens в CSS. Таким образом браузер может более корректно расставлять переносы.

Убираем возможность масштабировать:

Это особенно полезно на телефонах с операционкой Bada, которые могут дождаться загрузки страницы и просто умножить разрешение на 2. Также мы отключаем zoom, т.к. в приложениях обычно никакого зума нет.

Ещё один тег для вышеописанной проблемы:

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

Запрещаем кэшировать документ:

Это помогает на некоторых девайсах избавиться от неадекватных попыток восстановления страницы. То есть попытки адекватные, но не все девайсы восстанавливают страницу без багов.

Mobile Internet Explorer позволяет принудительно активировать технологию ClearType для сглаживания шрифтов:

Не забываем добавить картинки для Apple устройств:

Этот мета-тег необходим для того, чтобы приложение открылось в полноэкранном режиме:

Ну и корректируем верхнюю полоску в iPhone:

Ну и Windows 8 берет пример с iPhone. Дополнительная разметка для описания:

Дополнительная разметка для оформления ссылки на приложение в меню:

Дополнительные настройки для окна. Видимо, это такая отсылка к HTA, который не пошел:

Просим IE переключиться в последний режим:

Отключаем панель работы с изображениями:

Просим IE оформлять все в классическом стиле без учета текущей темы операционки:

Запрещаем распознавать номера телефонов и адреса, а так-же выделять их:

Для обычной веб-странички лучше вставить набор CSS стилей, описывающих телефон и адрес, а не блокировать их распознание.

Полный набор для SEO:

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

Обязательно скидываем стили по умолчанию:

Свой reset я немного изменил. Он задавал background для TD тега, и это вызвало багу в старом IE, если мы заливаем всю строку через тег TR

Добавляем набор своих стандартных стилей:

А в них учтены ещё некоторые нюансы. Например убираем выделение в CSS:

Но оставляем его для полей ввода текста:

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

Ставить border картинкам обычно не забывают, т.к. он в reset.css, а вот vertical-align пропускают:

Ещё у меня хранится стандартный класс анимации, чтобы «мозолить глаза»:

Можно копировать его по мере надобности для кнопок, табиков и т.п. Суть в том, что когда он постоянно попадается на глаза, подключение анимации становится чем-то естественным. О ней уже не надо вспоминать как о фиче, которую нужно не забыть подключить.

А ещё в этих стилях я раскрашиваю плашку которая всегда идет вверху HTML шаблона:

Ну и конечно, ради любимого IE в самом начале добавим:

Этой строкой просим его не показывать нам табличку про то, что скрипты опасны и т.д. и т.п., а просто брать и включать JS

Ну и стили для портретной и альбомной ориентации:

Если будете переводить в HTA, есть такая вставка:

Тут указаны параметры для HTA файла (например, наличие системного меню, отсутствие скролла и т.п.). А также добавлен JS файл (по умолчанию он закомментирован):

Его задача сжать окно и отцентрировать его по середине экрана (если, конечно, это возможно).

Ну а с этим наверное уже знакомы?

Бежим по новым тегам HTML5 и пересоздаем их для старых IE.

Ну и прокачиваем Android

Например, убираем у них адресную строку. Для этого:

• Берем высоту страницы и увеличиваем её на два
• Скроллим вверх до 1px сверху
• Возвращаем высоту в исходное положение

Таким хаком на Android`ах исчезает адресная строка. А ещё можно добить тач, об этом говорил Иван Чашкин на DUMP-2014 (а ещё тут есть статья http://habrahabr.ru/company/mailru/blog/165213/ от Mail.ru). Суть в том, что, если переопределить все тач события и сделать им stopPropagation, то Android`ы перестанут тормозить с отправкой событий.

Просим закэшировать приложение для offline работы, если это возможно:

Там выше ещё про переносы и язык было, поэтому полный тег такой:

Как выглядит input обычного человека:

Как выглядит input курильщика:

Атрибуты элемента:

• placeholder — подсказка для ввода
• maxlength — ограничение количества вводимых символов
• spellcheck — проверка правописания
• autocorrect — автоматическое корректировка написанного
• autocapitalize — автоматическое преобразование регистра
• x-webkit-speech — голосовой ввод

Требования к элементу:

• Тип элемента должен соответствовать типу вводимых данных. Если это поле ввода пароля, оно должно иметь тип password. Вводимые символы при этом должны заменяться звездочками.
• Элемент должен сопровождаться примером того, какие данные требуется ввести.
• Элемент должен подсказывать пользователю данные для ввода на лету.
• Элемент должен проверять орфографические ошибки.
• Максимальная длина ввода должна быть ограничена.
• Если это поле ввода нового пароля, необходимо добавить кнопку «авто-генерация пароля». При нажатие на которую генерируется случайный пароль.
• Элемент должен содержать атрибут pattern, указывающий на ожидаемый тип данных.
• При работающем JavaScript, введенные пользователем данные обязательно должны проверяться на лету. Если данные не прошли проверку — необходимо немедленно уведомить об этом пользователя.

Рекомендации:

• Если это поле ввода пароля, необходимо добавить кнопку «посмотреть пароль» (обычно оформляется в виде «глаза»), при нажатие на которую тип поля становится text, и пользователь может проверить введенные данные.
• Если есть возможность авто-заполнения поля, её необходимо обязательно использовать. Либо поместить около элемента кнопку, при нажатие на которую будет срабатывать авто-заполнение.
• В зависимости от ситуации, иногда возможно использовать «автокоррекцию» и на лету удалять запрещенные символы. Опасность такой ситуации заключается в том, что пользователь может не заметить коррекцию и отправить данные, которые отличаются от того, что он хотел ввести.

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

• Изменение размера поля должно быть запрещено (resize: none в CSS)
• Если это ввод некоего сообщения, необходимо информировать пользователя о том, сколько символов ему ещё можно ввести.

Замечания по верстке:

• Идеальная верстка должна выживать где-то в районе IE6. Стараемся по минимуму использовать inline-block. Заранее смотрим, что будет если он станет inline или block элементом.
• Position — это опасно. Желательно ничего никуда не позиционировать.
• Float — тоже к добру не приведет. Желательно вообще про него забыть.
• В дизайне надо сразу предусмотреть возможность того, что тот или иной фрагмент может отвалиться. В этом плане идеален стиль Metro. Как-то даже пришла в голову мысль, что Microsoft специально сделала такой стиль, в котором нет ни круглых углов, ни градиентов, ни теней. То есть ребята сразу отталкивались от своего браузера, чтобы никто не мог обвинить их в багах.

Progressive Enhancement и Graceful Degradation

Советую посмотреть доклад Сергея Горобцова из Яндекса про Progressive Enhancement и Graceful Degradation (http://tech.yandex.ru/education/shri/ekb-2013/talks/1500/) о том, как верстать так, чтобы было хорошо везде.

Что же ещё может понадобиться для стандартизации?

• Расческа для CSS (http://csscomb.ru/online/) поможет всему принять единый вид.
• Автопрефиксер Андрея Ситника поможет добить CSS-префиксы (http://habrahabr.ru/company/evilmartians/blog/176909/)
• Вот такой скрипт (http://bakhirev.biz/StalinGrad/zip/build/generation_pictures.zip) поможет нагенерировать кучу картинок (требует установленного imagemagick)

Так же в своем шаблоне я сразу подключаю несколько готовых модулей типа замены стандартных alert`ов, добавление автопрокрутки сбоку (как на хабре или вконтакте) и т.п. Но это уже велосипеды, которые выходят за рамки статьи.

А вот этот стандартный велосипед может пригодиться. Стандартный footer по микроразметке:

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

Вот пожалуй и все. Тем кто осили — небольшой бонус:

В демке вы можете посмотреть все meta теги из статьи.

Источник