На стороне ПК область просмотра относится к видимой области браузера, а ее ширина равна ширине окна браузера. В документе стандартов CSS область просмотра, также известная как начальный содержащий блок, является источником всех вычислений процентной ширины CSS, ограничивая макеты CSS максимальной шириной.
Мобильная сторона более сложная, она включает в себя три видовых экрана: Layout Viewport, Visual Viewport и Ideal Viewport.
В этой статье основное внимание уделяется окнам просмотра на мобильных устройствах.
1. Основные понятия
1.1 Два вида пикселей
Пиксель — это наименьшая область на экране компьютера, отображающая определенный цвет. Чем больше пикселей на экране, тем больше контента можно увидеть в том же диапазоне. Другими словами, при одинаковом размере устройства чем плотнее пиксели, тем четче изображение.
Итак, когда мы устанавливаем свойства элемента в CSSwidth: 250px;, что случится? Какова ширина этого элемента в пикселях?
На самом деле уже используются два разных типа пикселей: физические пиксели и пиксели CSS.
Физические пиксели (пиксели устройства, пиксели устройства)
Относится к физическим пикселям экрана устройства, а количество физических пикселей для любого устройства является фиксированным.
CSS-пиксели
это абстракция, используемая в CSS и JS. Соотношение между ним и физическими пикселями зависит от характеристик экрана (будь то высокой плотности) и масштабирования, выполняемого пользователем, которое конвертируется самим браузером.
На экране Apple Retina каждые 4 пикселя сгруппированы для рендеринга изображения в области отображения одного пикселя на обычном экране, чтобы добиться более детального эффекта отображения. На данный момент элемент размером 250 пикселей занимает ширину 500 физических пикселей.
Если пользователь увеличивает масштаб, пиксель CSS также будет охватывать больше физических пикселей.
1.2 Три окна просмотра
Мобильные браузеры обычно имеют ширину от 240 до 640 пикселей, а большинство веб-сайтов, предназначенных для ПК, имеют ширину не менее 800 пикселей.Если окно браузера по-прежнему используется в качестве области просмотра, содержимое веб-сайта будет выглядеть очень узким на мобильных телефонах.
Поэтому вводятся три концепции области просмотра макета, визуальной области просмотра и идеальной области просмотра, так что область просмотра в мобильном терминале больше не связана с шириной браузера.
видовой экран макета
Как правило, браузеры мобильных устройств по умолчанию устанавливают метатег области просмотра, который определяет виртуальную область просмотра макета, которая используется для решения проблемы раннего отображения страницы на мобильных телефонах. iOS и Android в основном устанавливают разрешение окна просмотра на 980 пикселей, поэтому веб-страницу на ПК можно в основном отображать на мобильном телефоне, но элементы выглядят маленькими.Как правило, веб-страницу можно масштабировать вручную по умолчанию.
Доступ к ширине/высоте окна просмотра макета можно получить черезdocument.documentElement.clientWidth / HeightПолучать.
Как видите, ширина области просмотра макета по умолчанию составляет 980 пикселей. Если вы хотите явно установить область просмотра макета, вы можете использовать метатег в HTML:
<meta name="viewport" content="width=400">
Окно просмотра макета делает окно просмотра полностью независимым от ширины экрана мобильного браузера. Макет CSS будет рассчитываться в соответствии с ним и ограничиваться им.
визуальное окно просмотра
Визуальное окно просмотра — это область, которую пользователь видит в данный момент, и пользователь может манипулировать визуальным окном просмотра, изменяя масштаб, не затрагивая окно просмотра компоновки.
Отношение между визуальным окном просмотра и коэффициентом масштабирования:
当前缩放值 = 理想视口宽度 / 视觉视口宽度
Таким образом, когда пользователь увеличивает масштаб, визуальное окно просмотра становится меньше, а пиксели CSS занимают больше физических пикселей.
идеальное окно просмотра
Ширина окна просмотра макета по умолчанию не является идеальной шириной, поэтому Apple и другие производители браузеров представили понятие идеального окна просмотра, которое представляет собой оптимальный размер окна просмотра макета для устройства. Веб-сайт, отображаемый в идеальном окне просмотра, имеет оптимальную ширину без необходимости масштабирования пользователем.
Значение идеального окна просмотра на самом деле является значением разрешения экрана, а соответствующий пиксель называется аппаратно-независимым пикселем (dip). Провал не зависит от физических пикселей устройства, провал занимает одно и то же место на экране любого устройства с любой плотностью пикселей. Если пользователь не увеличивает масштаб, то один пиксель CSS равен одному падению.
Используйте следующие методы, чтобы сделать окно просмотра макета той же ширины, что и идеальное окно просмотра:
<meta name="viewport" content="width=device-width">
По сути, это основа адаптивной верстки.
2. Настройки видового экрана
Мы можем использовать метатег области просмотра (метатег области просмотра), чтобы установить область просмотра макета.
<meta name="viewport"
content="width=device-width,initial-scale=1.0,maximum-scale=1">
Ниже приведено подробное описание каждого свойства:
| Имя свойства | стоимость | описывать |
|---|---|---|
| width | положительное целое число или ширина устройства | Определяет ширину области просмотра в пикселях. |
| height | положительное целое число или высота устройства | Определяет высоту области просмотра в пикселях, обычно не используется. |
| initial-scale | [0.0-10.0] | Определите начальное значение масштабирования |
| minimum-scale | [0.0-10.0] | Определяет максимальный масштаб масштабирования, он должен быть меньше или равен настройке максимального масштаба. |
| maximum-scale | [0.0-10.0] | Определяет минимальный масштаб для уменьшения масштаба, он должен быть больше или равен настройке минимального масштаба. |
| user-scalable | yes / no | Определяет, разрешать ли пользователю вручную масштабировать страницу, значение по умолчанию — «да». |
Стоит отметить несколько моментов:
- Тег области просмотра действителен только для мобильных браузеров, а не для браузеров ПК.
- При масштабе 100 % ширина наклона = ширина CSS-пикселя = идеальная ширина области просмотра = ширина области просмотра макета.
- Установка только начального масштаба или ширины может привести к проблемам с совместимостью, поэтому лучший способ настроить окно просмотра макета на идеальное окно просмотра — установить оба свойства одновременно.
- Масштабирование вручную может быть применено в Android Chrome, даже если установлено значение user-scalable=no.
3. Однократный, двукратный, трехкратный
Аппаратные пиксели дисплея MacBook Pro Retina имеют размер 2880 x 1800 пикселей. При установке разрешения экрана на 1920 пикселей * 1200 пикселей идеальное значение ширины области просмотра составляет 1920 пикселей, тогда значение ширины наклона составляет 1920 пикселей. Его отношение к идеальной ширине области просмотра составляет 1,5 (2880/1920), это соотношение называется соотношением пикселей устройства:
逻辑像素宽度 * 设备像素比 = 物理像素宽度
Соотношение пикселей устройства может быть передано черезwindow.devicePixelRatioчтобы получить его, или используйте CSSdevice-pixel-ratio.
Ниже приведены распространенные соотношения пикселей устройства:
- Настольный дисплей нормальной плотности:
devicePixelRatio = 1 - Экран настольного компьютера высокой плотности (MAC Retina):
devicePixelRatio = 2 - Основной дисплей мобильного телефона:
devicePixelRatio = 2 or 3
Для изображения размером 100px * 100px установите его ширину и высоту с помощью CSS:
{
width:100px;
height:100px;
}
Это нормально открывать на компьютере с обычным дисплеем, но при условии, что он открыт на мобильном телефоне или экране Retina, отображая в соответствии с логическим разрешением, ихdevicePixelRatio = 2, то это эквивалентно использованию 4 физических пикселей для описания 1 электронного пикселя. Это эквивалентно тому, что вы взглянете на изображение через 2-кратное увеличительное стекло, и изображение станет размытым.
В настоящее время вам необходимо использовать изображения @2x или даже @3x, чтобы избежать искажения изображения.
Наконец, в этой статье рассматриваются только основные концепции окон просмотра в мобильной разработке. Подробности см. в шедевре PPKСправочник по мобильному Интернету
PS: Для электронной версии вы можете подписаться на официальный аккаунт «Код готов» и отправить «ppk», чтобы получить его.