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

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

Используйте условный CSS так, чтобы можно было создать специфичные для iOS таблицы стилей, как описано в Использовании Условного выражения CSS. Можно также использовать объектное обнаружение, и обнаружение WebKit, как описано в Следуют за Хорошими Методами веб-дизайна, чтобы использовать расширения, но остаться независимым от браузера. Только если необходимый, используйте строку агента пользователя, как описано в Использовании Строки агента пользователя Safari для обнаружения Safari на iOS или определенном устройстве.

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

Используя условное выражение CSS

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

Например, рисунок 2-1 показывает веб-страницу, содержащую условный CSS в частности для iOS. Рисунок 2-2 показывает ту же веб-страницу, представленную на рабочем столе.

  
Small device rendering
  Настольный рендеринг небольшого устройства renderingFigure 2-2 рисунка 2-1
Desktop rendering

CSS3 распознает несколько типов среды, включая печать, карманный компьютер и экран. iOS игнорирует печать и карманные мультимедийные запросы, потому что эти типы не предоставляют высокопроизводительный веб-контент. Поэтому используйте экранный запрос типа среды для 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">

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

<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) { ... }

Вот некоторые примеры специфичных для носителей таблиц стилей CSS3, где Вы могли бы обеспечить различный стиль для экрана и печати. Перечисление 2-1 выводит на экран белый текст на темно-сером фоне для экрана. Перечисление 2-2 выводит на экран черный текст на белом фоне и скрывает навигацию для печати.

Перечисление 2-1  Специфичная для экрана таблица стилей

 
@media screen {
        #text { color: white; background-color: black; }
}

Перечисление 2-2  Специфичная для печати таблица стилей

 
@media print {
        #text { color: black; background-color: white; }
        #nav  { display: none; }
}

Для получения дополнительной информации о мультимедийных запросах см.: http://www .w3.org/TR/css3-mediaqueries/.

Используя строку агента пользователя Safari

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

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

Например, Перечисление 2-3 показывает строку агента пользователя для iPhone рабочий iOS 2.0 и позже, где строка XXXX заменяется номером сборки.

  IPhone перечисления 2-3, работающий на строке агента пользователя iOS 2.0

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 следующие:

(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.

Например, строка агента пользователя для iPod touch содержит iPod в платформе называют как показано в Перечислении 2-4.

  IPod touch перечисления 2-4 рабочий iOS 1.1.3 строки агента пользователя

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

Строка агента пользователя для iPad содержит iPad в платформе называют как показано в Перечислении 2-5.

  IPad перечисления 2-5, выполняющий строку агента пользователя iOS 3.2

Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10

Обратите внимание на то, что строка агента пользователя немного отличается для более раннего Safari на выпусках iOS. Перечисление 2-6 показывает строку агента пользователя для iPhone рабочий iOS 1.1.4 и ранее. Обратите внимание на то, что строка платформы не содержит номер версии iOS.

  IPhone перечисления 2-6, выполняющий строку агента пользователя iOS 1.0

Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543 Safari/419.3

Как правило, Вы используете номер сборки WebKit для тестирования на поддерживаемые HTML-тэги WebKit и свойства CSS. Версия семьи Safari или маркетинговая версия, включена в строку агента пользователя для Safari на рабочем столе, также. Поэтому можно использовать его для отслеживания статистики использования через все платформы Safari.

Перейдите к этим веб-сайтам для узнавания больше о других рекомендуемых методах для обнаружения Safari и WebKit: