Safari

Создание совместимого веб-контента

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

Использование стандартов

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

Движок WebKit, используемый Safari на десктоп и Safari на iOS, поддерживает все самые современные веб-стандарты, в том числе:

  • HTML 4.01, HTML5
  • XHTML 1.0
  • CSS 2.1 и CSS3
  • ECMAScript 3 (JavaScript)
  • DOM Level 2
  • AJAX технологию, включая XMLHttpRequest

Избегайте фреймов

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

Используйте столбцы и блоки

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

Текстовые блоки, которые охватывают всю ширину веб-страницы трудно читать на iOS. Столбцы не только разбивают веб-страницу, что делает ее более удобной для чтения, но и позволяет пользователю легко дважды кликнуть по объекту на странице.

Когда пользователь дважды кликает веб-страницу, Safari на iOS смотрит на элемент, который был дважды нажат, и находит ближайший блок (определенный элементом, таким как <div>, <ol>, <ul> и <table>) или элементом изображения. Если найденный элемент представляет собой блок, Safari разверачивает iOS контент по ширине экрана, а затем центрирует его. Если это изображение, Safari iOS разворачивает его, чтобы поместить изображение, а затем центрирует. Если блок или изображение уже увеличено, Safari iOS сворачивает его обратно.

Помните о пределах iOS ресурсов

Хорошо работащая веб-страница на десктопе не дает никакой гарантии, что она будет хорошо работать на iOS. Имейте в виду, что iOS использует EDGE (c более низкой пропускной способностью, и высокой латентностью), 3G (более высокой пропускной способностью, и высокой латентностью) и Wi-Fi (более высокой пропускной способностью, и низким уровенем задержки) для подключения к интернету. Таким образом, необходимо, минимизировать размер веб-страницы. Включение неиспользуемых или ненужных изображений, CSS, и JavaScript в веб-страницы негативно отражается на производительности вашего сайта на iOS.

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

  • Максимальный размер декодированного GIF, PNG и TIFF изображения составляет 3 мегапикселя для устройств с менее чем 256 Мб оперативной памяти и 5 мегапикселей для устройств с большим или равным 256 Мб оперативной памяти.

    То есть, убедитесь, что ширина * высота ≤ 3 * 1024 * 1024 для устройств с менее чем 256 Мб оперативной памяти. Помните, что декодированный размер гораздо больше, чем размер кодированного изображения.

  • Максимальный декодированный размер для JPEG составляет 32 мегапикселя с использованием подвыборки.

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

  • Максимальный размер элемента canvas составляет 3 мегапикселя для устройств с менее чем 256 Мб оперативной памяти и 5 мегапикселей для устройств с большим или равным 256 Мб оперативной памяти.

    Высота и ширина объекта canvas составляет 150 х 300 пикселей, если не указано.

  • JavaScript ограничен до 10 секунд во времени исполнения для каждого верхнего уровня точки входа.

    Если ваш сценарий выполняется в течение более 10 секунд, Safari на iOS прекращает выполнение сценария в случайном месте в вашем коде, поэтому это может привести непредвиденным последствиям.

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

  • Максимальное количество документов, которые могут быть открыты одновременно,- восемь на iPhone и девять на iPad.

Кроме того, необходимо, чтобы размер изображения соответствовал образу. Не полагайтесь на браузерное масштабирование. Например, не ставьте 100 х 100 изображение в 10 х 10 <img> элемент. Используйте плитку из небольших изображений фона, не используйте большие фоновые изображения.

Используйте поддерживаемые JavaScript окна и диалоги

Используйте окна и диалоги поддерживаемые Safari на iOS и избегайте других.

Вы можете открыть новое окно в JavaScript, вызывая window.open(). Следует помнить, что максимальное число документов, следовательно, максимальное количество открытых окон, восемь в iOS.

Поддерживаемые методы JavaScript диалоги включают alert, confirm, print и prompt. Если вы вы используете эти методы, Safari на iOS отображает привлекательные диалоговые окна, не закрывая веб-страницы.

iOS Примечание: Обратите внимание, что метод showModalDialog не поддерживается в Safari на iOS.

Используйте поддерживаемые типы контента и особенностей iOS

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

На iPhone и iPod Touch, видео и аудио воспроизводятся в полноэкранном режиме. Видео автоматически расширяется до размера экрана и вращается, когда пользователь изменяет ориентацию. Элементы контроля автоматически скрываются, когда они не используются. На iPad, видео и аудио проигрывается либо встроенным в веб-страницу либо в полноэкранном режиме.

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

Сафари на iOS обеспечивает предпросмотр других типов контента, таких как MS Office (Word, Excel и PowerPoint), iWork (Pages, Numbers и Keynote) и RTF документов. Если другое приложение регистрируется для типа контента, то Safari iOS организовывает предпросмотр, а это приложение используется для открытия документа. Например, на iPad, страницы могут быть использованы для открытия Word и Pages документов, которые просматриваются в Safari на iOS. Если другое приложение регистрируется для типа контента, который Safari на iOS не поддерживает изначально, то Safari на iOS позволяет документу, загружаться и открываться с помощью этого приложения.

iOS Примечание: Превью документов RTF доступно в iOS 3.2 и выше. Возможность открыть загруженный файл доступно в iOS 3.2 и выше.

Когда пользователь нажимает определенные типы ссылок, Safari на iOS может запустить собственное приложение для обработки ссылки, например, Mail составит сообщение электронной почты, Maps для получения расположения, и YouTube, для просмотра видео. Если пользователь нажимает ссылку с телефоном, указанную на телефоннном устройстве, отображается диалоговое окно, желает ли пользователь, набрать этот номер. На десктопе, большинство из этих ссылок перенаправляются на соответствующий веб-сайт.

iOS Примечание: Обратите внимание, что типы Java и Flash не поддерживаются.

Используйте canvas для векторной графики и анимации

Вы можете использовать тот же объект canvas, который используется Dashboard виджетами для реализации сложных пользовательских интерфейсов для веб-приложений. Объект canvas был введен в Safari 2.0, и принимается другими движками браузеров, а также является частью спецификации WHATWG.

Используйте HTML5 audio and video элементы

Вы можете использовать HTML5 audio и video элементы для добавления аудио и видео на веб-страницы. На небольших устройствах, таких как iPhone и IPod touch, фильм играет только в полноэкранном режиме, а режим автоматического воспроизведения отключен, требуются действия пользователя, чтобы начать воспроизведение. На iPad, воспроизведение видео, встроенно в веб-страницу. При воспроизведении видео inline, вы можете создавать пользовательские элементы управления и получать события уведомлений, например, пауза и воспроизведение, для повышения взаимодействия с пользователем. Используйте класс HTMLMediaElement и его подклассы.

Используйте поддерживаемые iOS Rich Media типы MIME

Список мультимедийных MIME типов, поддерживаемых Safari на iOS. Файлы с этими MIME типами и расширениями файлов могут быть воспроизведены на iOS.

MIME типОписаниеРасширение
audio/3gpp3GPP media3gp, 3gpp
audio/3gpp23GPP2 media3g2, 3gp2
audio/aiff
audio/x-aiff
AIFF audioaiff, aif, aifc, cdda
audio/amrAMR audioamr
audio/mp3
audio/mpeg3
audio/x-mp3
audio/x-mpeg3
MP3 audiomp3, swa
audio/mp4MPEG-4 mediamp4
audio/mpeg
audio/x-mpeg
MPEG audiompeg, mpg, mp3, swa
audio/wav
audio/x-wav
WAVE audiowav, bwf
audio/x-m4aAAC audiom4a
audio/x-m4bAAC audio bookm4b
audio/x-m4pAAC audio (protected)m4p
video/3gpp3GPP media3gp, 3gpp
video/3gpp23GPP2 media3g2, 3gp2
video/mp4MPEG-4 mediamp4
video/quicktimeQuickTime Moviemov, qt, mqv
video/x-m4vVideom4v

Не используйте неподдерживаемые iOS технологии

В целом на iOS Safari не поддерживаются сторонние плагины или функции, требующие доступа к файловой системе. Следующие веб-технологии не поддерживаются на iOS:

  • Модальные диалоги

    Не используйте window.showModalDialog() в JavaScript.

  • События наведения мыши

    Пользователь не может возбудить событие перемещения курсора на nonclickable элемент в iOS. Элемент должен быть интерактивным, чтобы событие mouseover произошло.

  • Стили наведения (hover)

    Поскольку событие mouseover посылается перед mousedown событием, hover стили отображаются, только когда пользователь касается интерактивные элементы со стилем hover.

  • Всплывающие подсказки

    Также, как hover интерактивные элементы отображают tooltip только при их касании.

  • Java апплеты
  • Flash

    Не вызвайте JavaScript оповещения, которые просят пользователей скачать Flash.

  • QuickTime VR (QTVR) фильмы
  • Установку плагинов.
  • Пользовательские x.509 сертификаты
  • WML

    Safari на iOS не миниатюрный веб браузер, это полнофункциональный веб-браузер, отображающий страницы, в соответствии с дизайногм,- таким образом у Safari на iOS, нет никакой потребности в поддержке Wireless Markup Language (WML). Кроме того, он поддерживает XHTML мобильный профиль типов документов и сайтов на .mobi доменах.

    XHTML mobile тип документа:

    <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.1//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile11.dtd">
  • Загрузку и отправку файлов

    Сафари на iOS поддерживает возможность загрузки файлов, то есть элементы <input type="file"> - на IOS 6 и выше.

    Не предлагайте пользователю скачать такие плагины, как Flash на iOS.

По умолчанию Safari на iOS блокирует всплывающие окна. Однако пользователь может изменять это в настройках. Чтобы изменить настройки Safari, нажмите Настройки, далее Safari. Блокировка всплывающих окон будет включена в разделе Безопасность.

 
 
homeЗаметили ошибкукарта сайта 
   Made on a Mac