Apple mobile web app title html

iOS 8 web apps

by Taylor Fausak on January 27, 2015

Apple released the iPhone 6 and 6 Plus a few months ago. They also released iOS 8 along with it. Unfortunately they didn’t update their web app documentation at the same time. That leaves the official docs woefully out of date.

Apple has done this in the past. I filled in the gaps for configuring web apps with iOS 7, iOS 6, and iOS 5. This post will do the same for iOS 8. But instead of making you flip between four guides, I’ve put everything here.

This information works for all versions of iOS on all iPhones, iPads, and iPod Touches. Check out my example web app on an iOS device to see the finished product.

Configuration

apple-mobile-web-app-capable

This tag allows the page to be run full screen. Note that this only works when it has been added to the home screen.

apple-mobile-web-app-title

This tag sets a custom title. If it’s missing, iOS will use the tag. If that is missing too, it will default to “Favorites”. This is limited to about 8 to 12 characters.

apple-mobile-web-app-status-bar-style

This tag changes the color of the status bar. There are three options: default , black , and black-translucent . The best bet for maximum compatibility is black ; default and black-translucent behave differently between iOS 6 and 7. (Sometimes on iOS 7+, the status bar starts as white-on-white or black-on-black. Restarting the web app fixes this problem.)

viewport

This tag sets the size of the browser’s viewport. That means it determines how wide the virtual window is. By setting initial-scale to 1, the virtual window will be the same size as the physical device. That makes it the only setting you need here. Other settings, like device-width just cause trouble. (In particular, device-width=320 will cause letterboxing on iOS 7+.)

If you want to pretend like you’re a native app, set minimum-scale=1 and maximum-scale=1 . Be warned that this means users can’t scale your app at all.

format-detection

This tag prevents Safari from automatically linking phone numbers.

Icons

You’ll need seven icon sizes:

• 152×152 (76@2x) for iPad retina on iOS 7+
• 144×144 (72@2x) for iPad retina on iOS 6
• 76×76 for iPad on iOS 7+
• 72×72 for iPad on iOS 6
• 180×180 (60@3x) for iPhone 6 Plus
• 144×144 (57@2x) for iPhone retina on iOS 6
• 57×57 for iPhone on iOS 6

There are two icon sizes you might think you need but actually don’t:

• 120×120 (60@x) for iPhone retina on iOS 7+: There’s no way to tell this apart from the 60@3x icon for the iPhone 6 Plus.
• 60×60 for iPhone on iOS 7+: There are no devices that support this combination.

If you set the rel to apple-touch-icon instead of apple-touch-icon-precomposed , iOS 6 will apply a glossy icon finish. For consistency with iOS 7+, use precomposed icons.

By default, the icon is a screenshot of the page. If there are no icon tags, Safari will try the following URLs:

1. /apple-touch-icon-180×180-precomposed.png
2. /apple-touch-icon-180×180.png
3. /apple-touch-icon-precomposed.png
4. /apple-touch-icon.png

The exact dimensions will depend on the device.

Startup images

You’ll need ten startup image sizes:

• 1536×2008 (768×1004@2x) for iPad retina portrait
• 1496×2048 (748×1024@2x) for iPad retina landscape
• 768×1004 for iPad portrait
• 748×1024 for iPad landscape
• 1242×2148 (414×716@3x) for iPhone 6 Plus portrait
• 1182×2208 (394×736@3x) for iPhone 6 Plus landscape
• 750×1294 (375×647@2x) for iPhone 6
• 640×1096 (320×548@2x) for iPhone 5
• 640×920 (320×460@2x) for iPhone retina
• 320×460 for iPhone

Note that you only need portrait and landscape images for iPads and the iPhone 6 Plus. All other iPhones only start web apps in portrait.

In order for these to work, your web app must be apple-mobile-web-app-capable . They will only show up when launching your web app from the home screen.

Unlike icons, startup images don’t have a default. If you don’t provide one, the screen will be plain white. And Safari doesn’t try anything automatically. You have to add the meta tags.

Landscape images aren’t actually in landscape; they’re taller than they are wide. They should be rotated 90 degrees clockwise from their correct orientation.

On iOS 7+, startup images are stretched when the app launches. On iOS 7, the image pops under the status bar once the app loads. Unfortunately there’s no way to provide a startup image with the correct dimensions. It will always be stretched on iOS 7+.

That being said, startup images must be the exact resolution listed here. Safari will not perform any scaling.

Hacks

This style prevents fonts from getting bigger when rotating to landscape.

Content on this site is licensed under a Creative Commons Attribution 4.0 International license. The source for this page is available on GitHub.

Источник

Мета-теги 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 запрещает распознавать номера телефонов и адреса.

Источник

Блог Vaden Pro

Правильный для мобильных сайтов

В нынешнее время мобильные гаджеты всё увереннее покоряют мир. Приблизительно год назад доля трафика от мобильных устройств составляла около 4%, а на сейчас этот показатель увеличился ровно в двое и теперь составляет 8%. Некоторые эксперты уже прогнозируют, что такая тенденция будет сохраняться и дальше. А пара экспертов из Cisco вообще утверждают, что доля мобильного трафика за 2016 год вырастет не в два, а в 18 раз.

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

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

В первую очередь хочется начать с того, что добавим некоторое расширение нашему тегу :

Благодаря такой манипуляции мы присвоим тегу класс .iem7, при условии, что страница будет открыта в мобильном IE. Это может крайне пригодится, ведь все знают, что порой страницы открываются очень по «странному» в этом браузере, и с помощью добавленного класса, это можно будет поправить.

Appcache

html manifest = «default.appcache» >

А вот добавляя manifest в тег мы можем подключить appcache. Это по сути включит кэширование страницы непосредственно в браузер, что позволит пользователю юзать приложение оффлайн. Ну а помимо этого пользователи смогут просматривать сайт когда нет сети (но это касается лишь тех страниц которые ранее были закешированны) , это позволит сайтам загружаться и открываться намного быстрее, ну и сервера будут менее загруженными.

Также AppCache дает возможность разработчикам задать список элементов, которые обязательно должны быть закешированны.

Чтобы это сделать, в файле необходимо записать следующее:

Чтобы убедиться в верности заполнения данного файла, можно воспользоваться специальным валидатором.

Title

title > Заголовок title >

Самый обыденный тег, все знают, что он задает заголовок страницы, но в случае с мобильными сайтами, есть некоторые нюансы. В мобильной версии он работает в целом как и в десктопной, но иногда title используется для подписи вкладок, отметки сайта в истории браузера. Но бывает и так, что он выводится в самом верху экрана. А главное, о чем стоит помнить, так это то, что в отличии от десктопной версии, title мобильный имеет серьезное ограничение по символам, как правило это 15-40 символов в книжном режиме, и немного больше (60) в альбомном. Соответственно, в мобильной версии заголовок следует уменьшить.

HandheldFriendly

meta name = «HandheldFriendly» content = «True» >

Следующим рассмотрим довольно специфический мета-тег HandheldFriendly. Когда то давно, этот тег был необходим для браузеров на мобильных ОС типа уже практически забытой Palm OS и всё еще актуальной Blackberry OS. Он определял разметку, «заточенную» под мобильные гаджеты. Сейчас он по сути делает тоже самое. Тег сообщает устройству, что страница версталась с учетом особенностей мобильного устройства, и что ее необходимо отображать не применяя масштабирование.

MobileOptimized

meta name = «MobileOptimized» content = «320» >

Очередной мета-тег, точно пригодится для IE. Это тег MobileOptimized. Его Microsoft сделала, чтобы задать фиксированную ширину странице, которая загружается в браузере IE. Задав в контенте этого тега точный горизонтальный размер странице в пикселях, она будет отображаться в одну колонку заданной ширины. Это может значительно упростить работу верстальщику, ведь браузер не будет пытаться подогнать ее так, как ему вздумается. Ну и помимо всего прочего, поисковые роботы, при индексировании страниц, так же обращают внимание на данный тег.

Viewport

meta name = «viewport» content = «width=device-width» >

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

Иконки

Переходим к иконкам, ведь для мобильных гаджетов они крайне актуальны. Суть вот в чем, на iOS и Android можно закладку сайта разместить на главном экране. Там она соответственно будет отображаться в виде иконки. И вот чтобы там отображалась именно ваша иконка, необходимо в корне сайта разместить картинку с размерами 57×57 px и назвать ее apple-touch-icon.png.
Однако для iPhone выше третьего поколения размеры изображения изменились и составляют 114×114 px, а для iPad 72×72 px. Ну а чтобы не мучатся с этими размерами, можно добавить просто квадратную картинку, которую Safari уже сам обрежет так, как ему будет необходимо, а также в старых версиях он добавит классические эффекты типа скругленные углы и стеклянность.

Ну и конечно же иконка может иметь полупрозрачность, в таком случае все прозрачные элементы станут черными.

Но от всех этих эффектов можно отказаться, при необходимости. Для этого стоит вместо стандартного значения написать следующее: apple-touch-icon-precomposed. Как утверждают эксперты, лучше всего использовать оба типа иконок, это позволит добиться максимальной совместимости со всеми операционными системами.

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

А вот Android «понимает» иконки только начиная с версии 2.1 и то, исключительно precomposed.

link rel = «shortcut icon» href = «images/l/apple-touch-icon.png» >

А вот таким образом мы подключаем возможность получать иконки на прочих операционных системах.

link rel = «apple-touch-startup-image» href = «images/l/splash.png» >

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

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

• 320×480 (для версии iPhone ниже 4 поколения)
• 640×960 (старше 4го поколения и нового iPod Touch)
• 768×1004 (iPad в портретном режиме)
• 1024×748 (iPad в горизонтальном режиме)

meta name = «apple-mobile-web-app-capable» content = «yes»/>

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

meta name = «apple-mobile-web-app-status-bar-style» content = «default» >

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

В контент данного тега можно записать – default, black или black-translucent.

Понять не сложно что к чему: Default – оставит всё без изменений; black – добавит фоном черный цвет; black-translucent – добавит к черному фону еще и полупрозрачность.

В завершение еще парочка нужных тегов:

meta http — equiv = «cleartype» content = «on» >

Таким образом можно принудительно заставить IE использовать сглаживание шрифтов.

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

Источник