Safari

Настройка окна просмотра

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

 

Макет и метрики на iPhone и IPod Touch

Пооскольку Safari на iOS lобавляет элементы управления выше и ниже веб-контента, у вас нет доступа ко всей площади экрана. В портретной ориентации, видимая область для веб-контента на iPhone и IPod Touch составляет 320 х 356 пикселей, как показано на рисунке ниже. В альбомной ориентации, видимая область составляет 480 × 208 пикселей.

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

 

Что такое окна просмотра?

Окно просмотра на десктопе и окно просмотра на iOS немного отличаются.

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

Настройки окна просмотра по умолчанию

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

Использование мета тега viewport

Использование мета тега viewport способно улучшить представление вашего веб-контента на iOS. Обычно вы используете мета тег viewport для установки ширины и начального масштаба просмотра. Например, если ваша веб-страница уже, чем 980 пикселей, то Вы должны установить ширину окна просмотра, чтобы соответствовать вашему веб-контенту. При разработке iPhone или iPod touch специфичного веб-приложения, установите ширину по ширине устройства.

Поскольку iOS работает на устройствах с различным разрешением экрана, вы должны использовать константы вместо числовых значений при ссылке на размеры устройства. Используйте device-width для ширины устройства и device-height для высоты в портретной ориентации.

Вам не нужно устанавливать все свойства окна просмотра. Если установлено только одно из свойств, то Safari на iOS подставляет другие свойства. Например, если вы установите масштаб в 1.0, Safari предполагает device-width ширину в портретной и device-height в горизонтальной ориентации. Поэтому, если вы хотите иметь ширину 980 пикселей и иметь начальный масштаб равный 1,0, то установите оба этих свойства.

Например, чтобы установить ширину окна просмотра по ширине устройства, добавьте это в ваш HTML файл:

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

Чтобы установить начальный масштаб в 1,0, добавьте это в ваш HTML файл:

<meta name="viewport" content="initial-scale=1.0">

Для установки начального масштаба и отключения пользовательского масштабирования, добавьте это в ваш HTML файл:

<meta name="viewport" content="initial-scale=2.3, user-scalable=no">

Изменение ширины и высоты окна просмотра

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

Если ваша веб-страница уже, чем ширина по умолчанию, например 640 пикселей, установите ширину окна просмотра по ширине веб-страницы. Чтобы сделать это, добавьте следующие строки в ваш файл HTML внутри <head> блока:

<meta name="viewport" content="width=640">

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

Как Safari выводит ширину, высоту и начальный масштаб

Если вы установили только некоторые из свойств, то Safari на iOS выводит значения других свойств с целью установки веб-страницы в видимой области. Например, если установлен только начальный масштаб, то ширина и высота случайны. Аналогично, если установлена​​ только ширина, то высота и исходный масштаб случайны, и так далее. Если предполагаемые значения не работаю на веб-странице, то установите большее количество свойств окна просмотра.

Так как любая ширины, высоты и исходный масштаб могут быть выведены на iOS Safari, размер окна просмотра может измениться, когда пользователь изменяет ориентацию. Например, когда пользователь изменяет с вертикальной на горизонтальную ориентацию путем поворота устройства, ширина окна может расширяться. Это единственная ситуация, когда действие пользователя может изменить размер окна, измененяя макет на iOS.

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

Типичная веб-страница отображаемая с настройками по умолчанию, где ширина окна просмотра составляет 980 и начальный масштаб не установлен:

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

Следующий пример задает ширину окна просмотра 1280px - <meta name="viewport" content="width=1280">:

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