Размер виртуального порта по умолчанию на мобильном телефоне, когда метатег не объявлен? - PullRequest
0 голосов
/ 17 апреля 2019

Обязательно ли для адаптивного дизайна использование области просмотра метатега?

<meta name="viewport" content="width=device-width,initial-scale=1">

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

Значит, этот метатег полезен только для мобильных устройств или это необходимо? Использует ли viewport ширину или высоту по умолчанию для мобильных устройств?

Ответы [ 2 ]

0 голосов
/ 17 апреля 2019

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

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

Устройства с узким экраном (например, мобильные устройства) визуализируют страницы в виртуальном окне или окне просмотра, которое обычно шире экрана, а затем уменьшают отображаемый результат, чтобы его можно было увидеть сразу. Затем пользователи могут перемещаться и масштабировать, чтобы увидеть различные области страницы.

Например, если ширина экрана мобильного устройства составляет 640 пикселей, страницы могут отображаться с виртуальным окном просмотра 980 пикселей , а затем он будет уменьшен до размера 640 пикселей.

Пояснения и значения по умолчанию для ширины и высоты с окном просмотра на мобильных телефонах

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

Apple настраивает область просмотра и значения по умолчанию

0 голосов
/ 17 апреля 2019

Это общая настройка области просмотра, используемая на различных мобильных оптимизированных веб-сайтах.

Свойство width определяет размер области просмотра.Можно установить конкретное значение (“width=600”) в терминах пикселей CSS.Здесь для него установлено специальное значение (“width= device-width”), которое является шириной устройства в пересчете на пиксели CSS в масштабе 100%.Свойство initial-scale определяет уровень масштабирования при первой загрузке страницы.

Примечание. Метатег должен быть добавлен в тег head в документе HTML.

A Адаптивные теги имеют следующие атрибуты:

width: Ширина виртуального видового экрана устройства. высота: Высота виртуального видового экрана устройства. initial-scale: Уровень масштабирования при первом посещении страницы. минимальный масштаб: Минимальный уровень масштабирования, до которого пользователь может увеличить страницу. максимальный масштаб: Максимальный уровень масштабирования, до которого пользователь может увеличить страницу. масштабируемый пользователем: Флаг, который позволяет устройству увеличивать или уменьшать масштаб (значение = да / нет).

Ссылка: https://www.geeksforgeeks.org/html-viewport-meta-tag-for-responsive-web-design/

...