Использование видового экрана

Question

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

Что на самом деле происходит, если положить этот метатег в заголовок?

Answer 1

Mobile Safari представил «метатег просмотра», чтобы веб-разработчики контролировали размер и масштаб видового экрана.

Используйте метатег viewport, чтобы улучшить представление вашего веб-сайта . Как правило, вы используете метатег viewport для установки ширины и начальную шкалу . Например, если ваша веб-страница более узкой, чем 980 пикселей, тогда вы должны установить ширину окна просмотра в соответствии с вашим веб-контентом. Если вы разрабатываете приложение для телефона или с сенсорным экраном, установите ширину в ширину устройства.

например: - <meta name="viewport" content="width=device-width, initial-scale=1">

Ширина свойство контролирует размер окна просмотра. Он может быть установлен на определенное количество пикселей, таких как width = 600 или специальное значение ширина устройства, которая является шириной экрана в пикселях CSS в масштабе из 100%. (Там являются соответствующими значения высоты и устройства по высоте, , которые могут быть полезны для страниц с элементами, которые изменяют размер или позицию на основе высоты окна просмотра.)

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

Источники: - MDN, developer.apple

Answer 2

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

<meta> видовой элемент дает инструкции браузера о том, как контроля размеры данной страницы и масштабирования.

Часть width=device-width устанавливает ширину страницы, которая следует за шириной экрана экрана (который зависит от устройства).

Часть initial-scale=1.0 устанавливает начальный уровень масштабирования, когда страница загружается в первую очередь браузером.

Этот код влияет только на вид на мобильный браузер. Вы можете видеть разницу в мобильном браузере.

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