Safari

Оптимизация веб-контента

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

Использование условных CSS

Как только вы используете CSS, для представления веб-страницы в столбцах, вы можете использовать условные CSS, чтобы создавать различные схемы для конкретных платформ и мобильных устройств. Используя CSS3 медиазапросы, вы можете добавить для iOS специфичные таблицы стилей веб-страницы, не затрагивая то, как вашы веб-страницы отображаются на других платформах.

CSS3 распознает несколько типов медиа типов, включая print, handheld и screen. iOS игнорирует print и handheld медиазапросы, потому что эти типы не обеспечивают высококачественный веб-контент. Таким образом, используйте тип медиазапроса screen для iOS.

Чтобы указать таблицу стилей, которая используется для iOS, не затрагивая другие устройства, используйте only ключевое слово в сочетании с ключевым словом screen в HTML файле. Старые браузеры игнорируют ключевое слово only, и не будут читать ваши iOS стилей. Используйте max-device-width, и min-device-width для описания размера экрана.

Например, для указания стилей для iPhone и iPod Touch, используйте выражение, подобное следующему:

<link media="only screen and (max-device-width: 480px)" href="small-device.css" type= "text/css" rel="stylesheet">

Чтобы указать стиль для устройств, отличных от iOS используйте выражение, подобное следующему:

<link media="screen and (min-device-width: 481px)" href="not-small-device.css" type="text/css" rel="stylesheet">

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

<link media="only screen and (-webkit-min-device-pixel-ratio: 2)" href="retina.css" type="text/css" rel="stylesheet">

Кроме того, вы можете использовать этот формат внутри блока CSS в HTML файле или во внешнем файле CSS:

@media screen and (min-device-width: 481px) { ... }
@media screen and (-webkit-min-device-pixel-ratio: 2) { ... }

Использование Safari user agent

Браузер отправляет специальную строку, называемую user agent, на веб-сайты, чтобы идентифицировать себя. Веб-сервер или JavaScript в загруженной веб-странице, определяет клиентский идентификатор и может изменить свое поведение. В простейшем случае, строка user agent включает в себя имя приложения, например, Navigator в качестве имени приложения и 6.0 в качестве версии. Safari для десктоп и Safari для iOS имеют свои собственные строки user agent.

Строка user agent Safari для iOS похожа на строку user agent для десктоп Safari, за исключением двух дополнений: она содержит имя платформы и мобильный номер версии. Имя устройства, содержится в наименовании платформы. Например, вы можете обнаружить iOS и конкретное устройство, такое как IPad. Как правило, вы не отправите iPhone спецефичный веб-контент для iPad, так как он имеет гораздо больший экран. Обратите внимание, что номера версий в этой строке могут быть изменены по мере поступления новых версиий iOS, так что любой код, который проверяет строку user agent не должен полагаться на номера версий.

Например, следующий листинг показывает строку user agent для iPhone работающего на iOS 2.0 и выше, где строка xxxx заменяется номером сборки.

Mozilla/5.0 (iPhone; U; CPU iOS 2_0 like Mac OS X; en-us) AppleWebKit/525.18.1 (KHTML, like Gecko) Version/3.1.1 Mobile/XXXXX Safari/525.20

Частью Safari iOS строки user agent, является следующее:

(iPhone; U; CPU iOS 2_0 like Mac OS X; en-us)

Строка платформы: iPhone заменяется на iPod при работе на iPod touch и на iPad при работе на iPad.

AppleWebKit/525.18.1

Номер сборки WebKit движка.

Version/3.1.1

Версия Safari

Mobile/XXXXX

Номер мобильной версии, где XXXX это номер сборки.

Safari/525.20

Номер сборки Safari

Например, user agent пользователя для iPod touch содержит iPod в наименовании платформы, как показано ниже:

Mozilla/5.0 (iPod; U; CPU like Mac OS X; en) AppleWebKit/420.1 (KHTML, like Gecko) Version/3.0 Mobile/4A93 Safari/419.3
 
 
homeЗаметили ошибкукарта сайта 
   Made on a Mac