1. Протестируйте свой веб-сайт на iPad и обновите код обнаружения агента пользователя при необходимости

Много веб-сайтов выполняют серверную сторону, проверяет строку агента пользователя браузера, чтобы определить, должны ли они служить мобильной версии своего веб-сайта. Safari на iPad способен к поставке «настольного» веб-опыта, и пользователи будут ожидать этот опыт, так как iPad имеет большой экран и быстрое сетевое соединение. Если у Вас есть версия Вашего веб-сайта, оптимизированного для мобильных устройств с маленькими экранами, НЕ служите этой мобильной версии пользователям iPad.

Перечисление 1 показывает Safari на строке агента пользователя iPad. Это идентифицирует версию Safari, работающего на iPad, и iPad идентифицируется как мобильное устройство.

  Safari перечисления 1 на строке агента пользователя iPad в iOS 7.0 SDK

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 на строке агента пользователя iPad содержит слово «Mobile», но не содержит слово «iPhone». Если Вы в настоящее время служите мобильному контенту какому-либо браузеру, идентифицирующему себя как «Мобильный», необходимо изменить проверки строки агента пользователя, чтобы искать iPad и избежать отправлять ему неверную версию сайта. Номера версий в этой строке подвержены изменениям в течение долгого времени, поскольку новые версии Safari на iPad становятся доступными, таким образом, любой код, проверяющий строку агента пользователя, не должен полагаться на номера версий.

Моделирование Safari на Запросах HTTP iPad в Safari на рабочем столе

Если Вы неспособны протестировать с iPad или Средством моделирования iPhone, можно моделировать Запрос HTTP от Safari на iPad в Safari на настольном компьютере. Во-первых, загрузите свой веб-сайт в Safari на OS X. Затем включите флажок рядом с «Меню Show Develop в строке меню» в области Advanced Preference Safari, как показано на рисунке 1.

Затем, выберите Develop> User Agent> Other из меню Safari. Вам предложат ввести строку агента пользователя. Скопируйте Safari на строке агента пользователя iPad выше, затем вставьте в нем в диалоговое окно, появляющееся, как показано на рисунке 2.

При щелчке по «OK» поле User-Agent в любых заголовках Запроса HTTP будет установлено в строку, которую Вы просто ввели, и страница автоматически перезагрузит. Когда страница перезагружает, необходимо проверить, что Вы не служите мобильной версии своего веб-сайта к iPad. Можно проверить, что Safari на строке агента пользователя iPad был отправлен в сервер путем проверки заголовков запроса в области Resources веб-Инспектора Safari, как показано на рисунке 3. Эта установка строки агента пользователя сохраняется на основе на окно.

2. Используйте стандарт W3C веб-технологии вместо плагинов

Плагины не поддерживаются в Safari на iPad, и при этом они не поддерживаются в Safari на iOS.

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

При использовании плагина для встраивания аудио или видео в веб-странице, можно использовать HTML5 <audio> и <video> теги для поставки звукового содержимого и видеоконтента в Safari на iOS. Эти теги работают беспрепятственно с HTTP Живой Обзор Потоковой передачи, и просто структурировать Ваш HTML для отступания к сменному содержанию в браузерах, не поддерживающих эти элементы. Для получения дополнительной информации об использовании HTML5 <audio> и <video> теги, посмотрите Руководство по Safari по Аудио HTML5 и Видео, и HTMLMediaElement, HTMLVideoElement, и HTMLAudioElement ссылки класса в Safari Ссылка Расширений DOM.

При текущем использовании плагина для рисования анимаций в веб-страницах, можно использовать комбинацию JavaScript, и CSS3 преобразовывает, переходы и анимации для создания анимаций в Safari на iOS. Для получения дополнительной информации о том, как использовать CSS, чтобы создать богатые анимации в веб-страницах, видеть Safari Ссылка CSS, Руководство по Визуальным эффектам Safari, и «Аудио, Видео, и Визуальные эффекты» пример кода в Safari Центр Dev.

Тестирование без плагинов в Safari на рабочем столе

Если Вы неспособны протестировать с Safari на iPad или использовании Средства моделирования iPhone, можно проверить, что веб-сайт работает хорошо без плагинов в Safari на рабочем столе. Начните путем отключения флажка рядом с, «Включают плагины» в области Security Preference Safari, как показано на рисунке 4.

Затем, посетите свой веб-сайт. Элементы на веб-страницах, использующих плагины, могут быть заменены сообщениями, советуя Вам загрузить или обновить требуемый плагин. В Safari на iOS этими областями может быть пробел.

3. Проверьте свои настройки тега области просмотра

При указании настроек области просмотра для веб-страницы в Safari на iPhone проверьте, что эти те же настройки подходят для Safari на iPad. В частности, если Вы хотите, чтобы ширина области просмотра соответствовала ширину устройства, необходимо использовать device-width постоянный вместо трудно кодированного пиксельного значения. Например, много веб-сайтов используют установку, которая, как показывают в Перечислении 2, установила область просмотра в ширину, которую они считают подходящими для iPhone.

  Неправильное перечисление 2: Используя пиксельное значение для ширины области просмотра.

<meta name="viewport" content="width=320" /> <!--- WRONG //--->

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

  Корректное перечисление 3: Используя константу для ширины области просмотра.

<meta name="viewport" content="width=device-width" />

4. Измените код, полагающийся на фиксированное расположение CSS

CSS фиксировал располагающие работы в Safari на iPhone и iPad, но не, как Вы могли бы ожидать. В то время как элементы, использующие фиксированное расположение в Safari на OS X всегда, остаются на экране, элементы, использующие фиксированное расположение в Safari на iPhone, и iPad может закончиться вне экрана, поскольку пользователи масштабируют и панорамируют веб-страницу. Почему это происходит?

По определению содержание блока элемента веб-страницы, использующего фиксированное расположение CSS, является областью просмотра. Когда Вы устанавливаете, это означает это position: fixed с a bottom и right значение 20px как показано в Перечислении 4, Вы «фиксировали» позицию элемента на 20 пикселей выше базового края области просмотра, и 20 пикселей от правого края области просмотра.

Перечисление 4  CSS фиксировало расположение.

 #fixed {

    position: fixed;

    right: 20px;

    bottom: 20px;

    height: 100px;

    width: 100px;

    background-color: purple;

  }

В Safari на рабочем столе область просмотра походит на окно — поскольку Вы изменяете размеры окна, Вы изменяете размеры области просмотра. Как Вы прокручиваете, Вы прокручиваете область просмотра. Следовательно, в Safari на OS X, элемент всегда остается на экране.

Safari на iPad и Safari на iPhone не имеют окон изменяемого размера. В Safari на iPhone и iPad, размер окна установлен в размер экрана (минус средства управления пользовательским интерфейсом Safari) и не может быть изменен пользователем. Для перемещения веб-страницы пользователь изменяет уровень изменения масштаба и позицию области просмотра, поскольку они удваивают касание или повышение для увеличивания масштаб или, или путем касания и перетаскивания для панорамирования страницы. Поскольку пользователь изменяет уровень изменения масштаба и позицию области просмотра, которую они делают так в просматриваемой предметной области фиксированного размера (т.е. окно). Это означает, что элементы веб-страницы, которым «фиксировали» их позицию к области просмотра, могут закончиться вне просматриваемой предметной области, вне экрана.

5. Подготовитесь к сенсорному интерфейсу

Несмотря на то, что внешняя аппаратная клавиатура является опцией для использования с iPad, основные средние значения взаимодействия с веб-контентом в Safari на iPad через касание. Клавиатура программного обеспечения появляется в Safari на iPad и iPhone, когда управление формой, требующее ввода текста — такой как <input type="text"> или <textarea> — фокус усилений. Пользователи не должны быть вынуждены полагаться на клавиатуру для навигации по веб-странице.

Кроме того, Safari на пользователях iOS взаимодействует с Вашим веб-контентом непосредственно с их пальцами, вместо того, чтобы использовать мышь. Это создает новые возможности для сенсорных интерфейсов, но не работает хорошо с состояниями парения. Например, указатель мыши может нависнуть над элементом веб-страницы и инициировать событие; палец на Мультисенсорном экране не может. Поэтому события от нажатия мыши эмулированы в Safari на iOS. В результате элементы, полагающиеся только на mousemove, mouseover, mouseout или псевдокласс CSS :hover может не всегда вести себя как ожидалось на устройстве с сенсорным экраном, таком как iPad или iPhone.

Можно обработать касания непосредственно или даже обнаружить усовершенствованные жесты в Safari на iOS, с помощью событий DOM Touch touchstart, touchmove, touchend, и touchcancel. В отличие от событий от нажатия мыши, эмулированных, события DOM Touch специально предназначены для работы с сенсорными интерфейсами, таким образом, их поведение надежно и ожидается. Для получения дополнительной информации об использовании сенсорных событий в веб-контенте для Safari на iOS посмотрите раздел «Handling Events» Руководства по веб-контенту Safari, Touch, TouchEvent, и TouchList классы в Safari Ссылка Расширений DOM и пример кода SlideMe в Safari Центр Dev.

Начиная с касания и содержания в Safari на iOS вызовет диалоговое окно Сокращения/Копии/Вставки, можно также принять решение отключить выбор на элементах пользовательского интерфейса, таких как использование кнопок и меню -webkit-user-select: none. Важно только отключить выбор по мере необходимости на основе на элемент. Выбор в веб-страницах никогда не должен глобально отключаться.