Sets whether a web application runs in full-screen mode.
Syntax
If content is set to yes , the web application runs in full-screen mode; otherwise, it does not. The default behavior is to use Safari to display web content.
You can determine whether a webpage is displayed in full-screen mode using the window.navigator.standalone read-only Boolean JavaScript property.
Availability
Available for iOS.
Support Level
apple-mobile-web-app-status-bar-style
Sets the style of the status bar for a web application.
Syntax
This meta tag has no effect unless you first specify full-screen mode as described in apple- apple-mobile-web-app-capable .
If content is set to default , the status bar appears normal. If set to black , the status bar has a black background. If set to black-translucent , the status bar is black and translucent. If set to default or black , the web content is displayed below the status bar. If set to black-translucent , the web content is displayed on the entire screen, partially obscured by the status bar. The default value is default .
Availability
Available for iOS.
Support Level
format-detection
Enables or disables automatic detection of possible phone numbers in a webpage in Safari on iOS.
Syntax
By default, Safari on iOS detects any string formatted like a phone number and makes it a link that calls the number. Specifying telephone=no disables this feature.
Support Level
viewport
Changes the logical window size used when displaying a page on iOS.
Syntax
Use the viewport meta key to improve the presentation of your web content on iOS. Typically, you use the viewport meta tag to set the width and initial scale of the viewport.
For example, if your webpage is narrower than 980 pixels, then you should set the width of the viewport to fit your web content. If you are designing a Safari on iOS-specific web application, you should set the width to the width of the device.
Table 1 describes the properties supported by the viewport meta key and their default values. When providing multiple properties for the viewport meta key, you should use a comma-delimited list of assignment statements. Follow these rules when setting multiple properties:
Do not use a semicolon as a delimiter.
A space may work as a delimiter, but a comma is preferred.
For numeric properties, if the value contains a nonnumeric character but starts with a number, then the number prefix is used as the value. For example, 1.0x is equivalent to 1.0 and 123×456 is equivalent to 123 . If the parameter doesn’t begin with a number, the value is 0 .
When referring to the dimensions of a device, you should use the constants described in Table 2 instead of hard-coding specific numeric values. For example, use device-width instead of 320 for the width, and device-height instead of 480 for the height in portrait orientation.
You do not need to set every viewport property. If only a subset of the properties are set, then Safari on iOS infers the other values. For example, if you set the scale to 1.0 , Safari assumes the width is device-width in portrait and device-height in landscape orientation. Therefore, if you want the width to be 980 pixels and the initial scale to be 1.0 , then set both of these properties.
For example, to set the viewport width to the width of the device, add this to your HTML file:
To set the initial scale to 1.0 , add this to your HTML file:
To set the initial scale and to turn off user scaling, add this to your HTML file:
Use the Safari on iOS console to help debug your webpages as described in the Safari Web Inspector Guide. The console contains tips to help you choose viewport values—for example, it reminds you to use the constants when referring to the device width and height.
The width of the viewport in pixels. The default is 980 . The range is from 200 to 10,000 .
You can also set this property to the constants described in Table 2 .
The height of the viewport in pixels. The default is calculated based on the value of the width property and the aspect ratio of the device. The range is from 223 to 10,000 pixels.
You can also set this property to the constants described in Table 2 .
The initial scale of the viewport as a multiplier. The default is calculated to fit the webpage in the visible area. The range is determined by the minimum-scale and maximum-scale properties.
You can set only the initial scale of the viewport—the scale of the viewport the first time the webpage is displayed. Thereafter, the user can zoom in and out unless you set user-scalable to no . Zooming by the user is also limited by the minimum-scale and maximum-scale properties.
Specifies the minimum scale value of the viewport. The default is 0.25 . The range is from > 0 to 10.0 .
Specifies the maximum scale value of the viewport. The default is 5.0 . The range is from > 0 to 10.0 .
Determines whether or not the user can zoom in and out—whether or not the user can change the scale of the viewport. Set to yes to allow scaling and no to disallow scaling. The default is yes .
Setting user-scalable to no also prevents a webpage from scrolling when entering text in an input field.
Довольно часто люди не понимают разницы между шириной (width) и шириной устройства (device-width) (и, более того, есть примеры с минимальной (min-device-width) и максимальной шириной устройства (max-device-width)), используя медиазапросы CSS. Это недопонимание приводит к написанию плохого кода и значительно большему количеству работы для разработчика. Этот вопрос очень часто встречается на форумах SitePoint, поэтому пришло время объяснить все подробнее. В этой статье будет затронута эта проблема, а также мы более подробно рассмотрим, какой вариант следует использовать, создавая отзывчивые сайты.
Основные определения
Давайте определимся, что мы имеем ввиду, когда говорим о медиазапросах, основанных на «ширине» и «ширине устройства». Нижеприведенные цитаты взяты из статьи MDN о медиазапросах, и там есть такое определение «ширины»:
Свойство среды «ширина» (width) описывает ширину отображаемой поверхности устройства вывода (например, ширину окна документа или ширину окна страницы на принтере)
А вот так MDN определяют «ширину устройства»:
Описывает ширину устройства вывода (означая полный экран или страницу, а не только область отображения, такую как окно документа)
Так что же это на самом деле значит? Простыми словами, «ширина» и «ширина устройства» относятся к ширине устройства, а не всей ширине области просмотра, которая может быть абсолютно другим понятием. Все, что вас должно интересовать – это ширина области просмотра, вне зависимости от ширины устройства.
При этом основным различием между шириной и шириной устройства является то, что ширина устройства не всегда соответствует области просмотра определенного устройства.
Большинство планшетов и мобильных устройств не всегда имеют 1 пиксель устройства на 1 пиксель CSS. Например, вам стоит знать, что у iPhone 4 стандартная область обзора экрана составляет 640×960. Это означает, что на данном примере device-width iPhone4 равна 320×480. Дело в том, что Apple понимают, что не каждый сайт создан отзывчивым и пытается сделать хорошо всем, предоставив ширину около 980px для отображения десктопного варианта сайта. Это значит, что если нет метатега области обзора, iPhone4 берет сайт и отображает его, как если бы он был 980px в ширину, при этом втискивая его в экран шириной 320px, в результате чего с точки зрения пользователя сайт будет отображаться уменьшенным.
Для начала, как и во всех случаях превращения сайтов в отзывчивые и использования медиазапросов, тег области обзора meta необходимо поместить в раздел вашего сайта. Базовая стандартная версия приведена ниже.
Как только на нашей странице появится этот сниппет, если мы будем просматривать страницу на разных устройствах, будут срабатывать разные медиазапросы. Без этого, при просмотре страницы на определенном устройстве, она будет отображаться просто как уменьшенная версия страницы; устройство будет пытаться вжать целый сайт в экран шириной 320px. И это не есть хорошо ни для вас, ни для ваших пользователей! Пользователи не любят увеличивать сайт, чтобы увидеть контент, и они точно не хотят скроллить его туда-сюда.
Например, давайте возьмем iPhone 4, у которого стандартная ширина области просмотра 980px. Без тега meta ваши попытки использовать медиазапросы не приведут ни к чему, и устройство будет неправильно обращаться к стандартной области просмотра. Большинство медиазапросов рассчитано на 500px или меньше. Это обычно выполняется с помощью простого медиазапроса max-width. Без тега meta вы не получите эффекта от этого запроса, так как iPhone 4 будет продолжать отображать версию сайта шириной 980px. Давайте рассмотрим приведенный ниже пример:
Ниже прикреплены два скриншота, сделанные с помощью iPhone 4. На обеих страницах есть вышеуказанный CSS, но на одной используется тег области просмотра meta, а на другой нет.
Показанная выше страница не содержит тега meta, и, в результате, фон отображается красным и имитирует стандартную область просмотра шириной 980px, вместо того, чтобы использовать мобильный медиазапрос на 500px.
В этом случае метатег на месте и iOS корректно отображает страницу такой, какой мы хотим: она основана на ширине 320px и позволяет нашим медиазапросам работать таким образом, как мы ожидаем.
Почему следует выбирать device-width?
Честно говоря, заголовок этой статьи изначально подразумевает неиспользование device-width. Однако для device-width есть свое место. Если вы делаете сайт для определенных устройств, тогда да – вам следует использовать device-width.
С точки зрения CSS и RWD, хороший сайт – это тот, который на самом деле «агностичен к устройству» и не пытается потакать ширине каждого отдельного девайса. Таргетинг на отдельные контрольные точки для различных «типов» устройств (например, планшетов или мобильных телефонов) достигается путем фокусирования на то, как контент отображается на определенной ширине области просмотра, а потом путем внесения соответствующих изменений в медиазапросы. Поэтому не устройство диктует контрольные точки, а макет и контент, и в конечном итоге это может привести к оптимальным результатам, как с вашей точки зрения, так и с точки зрения пользователей.
Это может и быть той причиной, почему у стольких людей проблемы с созданием отзывчивого дизайна, и почему они жалуются, что это сложно. Но если они пытаются создавать дизайн под отдельные устройства, они ввязываются в заведомо проигрышную битву: количество устройств, которые необходимо учитывать (чтобы охватить всё), слишком огромное и просто сводит все к плохому коду. Также стоит упомянуть, что если вы решили использовать device-width, вы также должны задавать отдельные правила для ориентации (книжная или альбомная): ширина устройства не изменяется только из-за того, что вы повернули устройство на бок. Для этого нужно еще больше кода, а это означает еще больше головной боли.
Однако давайте посмотрим на другой возможный вариант
Что насчет “width”?
Я придерживаюсь мнения, как и многие опытные разработчики, что полностью отзывчивая страница, которая ведет себя так, как от нее ожидают, на всех возможных размерах экранов – это самый простой и наиболее выгодный способ получить наиболее эффективный для всех устройств макет.
Чтобы создать полностью отзывчивую и гибкую страницу, разработчик должен просто обеспечить, чтобы учитывались все области просмотра, а страница изменяла структуру и размер при необходимости в соответствии с контентом и дизайном.
Все что вам нужно для полностью отзывчивой страницы – это гибкий сайт и немного продуманных медиазапросов для таргетирования на стандартный ряд мобильных устройств, планшетов, компьютеров + области просмотра. Я предпочитаю использовать Foundation’s Media Queries, которые являются наиболее точными и охватывают все необходимые области просмотра.
Конечно, как и все в разработке, использование только запросов на основе ширины не является решением всех проблем с макетом. Это скорее необходимо для тестирования на мобильных устройствах в поисках различных багов и странностей отображения. Но, имея возможность видеть, как все будет отображаться на различных мобильных устройствах – это так же просто, как изменять размер окна вашего браузера.
Для тестирования я использую расширение для Chrome Responsive Web Design Tester. Оно позволяет выбирать определенное устройство. Вы увидите размер устройства и то, как ваша страница будет отображаться на таком устройстве.
Еще одно небольшое преимущество, которое хотелось бы упомянуть, это что использование запросов на базе ширины гарантирует, что будущие устройства будут отображать сайт полноценно. Это довольно перспективный подход, так как вы ориентируетесь на что-то более глобальное – общий размер области просмотра – а не на определенное устройство.
Вы все еще планируете использовать device-width в медиазапросах? Приведенные аргументы оказались недостаточно убедительными? Использование обычной «ширины» и области просмотра устройства упрощает отзывчивый дизайн и в конечном итоге является лучшим вариантом, который следует использовать практически всегда.
Источник
Как установить viewport meta для iPhone, который правильно обрабатывает вращение?
поэтому я использую:
чтобы мой HTML-контент хорошо отображался на iPhone. Он отлично работает, пока пользователь поворачивает устройство в ландшафтный режим, где отображение остается ограниченным до 320px.
есть ли простой способ указать окно просмотра, которое изменяется в ответ на изменение пользователем ориентация устройства? Или я должен прибегнуть к Javascript, чтобы справиться с этим?
9 ответов
просто пытался разобраться в этом сам, и решение, которое я придумал, было:
это, кажется, блокирует устройство в масштабе 1.0 независимо от его ориентации. В качестве побочного эффекта он полностью отключает масштабирование пользователя (масштабирование Пинча и т. д.).
для тех, кто все еще заинтересован:
это предписывает Safari предотвратить пользователь от масштабирования страницы с жестом» щипка » и фиксирует ширина порта просмотра до ширины экран, который когда-либо ориентация iPhone в.
вы не хотите потерять параметр масштабирования пользователя, если вы можете помочь ему. Мне нравится это решение JS от здесь.
Я придумал немного другой подход, который должен работать на кросс-платформах
до сих пор я тестировал в on
Самсун галактика 2
Samsung Галактика s
Samsung galaxy s2
Samsung galaxy Note (но пришлось изменить css на 800px [см. ниже]*)
Motorola
это массивная губа вперед с мобильным развитием .
вы устанавливаете, что он не может масштабироваться (максимальный масштаб = начальный масштаб), поэтому он не может масштабироваться при повороте в ландшафтный режим. Установить максимальный масштаб=1.6 и это будет правильно по размеру ландшафтном режиме.
у меня была эта проблема сама, и я хотел, чтобы как можно было установить ширину, так и обновить ее на rotate и позволить пользователю масштабировать и масштабировать страницу (текущий ответ предоставляет первый, но предотвращает более поздний как побочный эффект).. поэтому я придумал исправление, которое сохраняет ширину вида правильной для ориентации, но все же позволяет масштабировать, хотя это не супер прямо вперед.
во-первых, добавьте следующий Javascript на веб-страницу, которую вы отображение:
затем в вашем — (void)didRotateFromInterfaceOrientation: (UIInterfaceOrientation)метод fromInterfaceOrientation добавьте:
дополнительные настройки можно сделать, изменив более viewportal параметры содержание:
Кроме Того, Я поймите, вы можете поставить прослушиватель JS для onresize или что-то вроде запуска масштабирования, но это сработало для меня, поскольку я делаю это из Cocoa Touch UI framework.
надеюсь, это поможет кому-то:)
suport все iphones, все ipads, все андроиды.
просто хочу поделиться, я играл с настройками видового экрана для моего отзывчивого дизайна, если я установил максимальную шкалу до 0,8, начальную шкалу до 1 и масштабируемую до no, то я получаю наименьший вид в портретном режиме и вид iPad для ландшафта: D. это действительно уродливый хак, но он, кажется, работает, я не знаю, почему, поэтому я не буду его использовать, но интересные результаты
почему бы просто не обновить страницу, когда пользователь поворачивает экран с помощью JavaScript
