В мире Интернета отзывчивая адаптация беспроводных сетей и ПК — это фактически два мира...
1. Окно просмотра
1.1 основы области просмотра
Интерпретация области просмотра на китайском языке означает «область просмотра», которая представляет собой область в браузере, используемую для отображения веб-страниц. На стороне ПК его размер равен размеру видимой области браузера, поэтому мы не уделяем этому понятию слишком много внимания; на мобильной стороне в большинстве случаев область просмотра больше, чем видимая область браузера, гарантируя, что страница ПК перемещается Видимость над браузером. Чтобы улучшить видимость, мы тщательно изучили область просмотра для мобильных устройств.
1.2 Детали области просмотра
На мобильной стороне есть три типа видовых экранов: layoutviewport, visualviewport, perfectviewport. Конкретное объяснение следующее:
- layoutviewport: больше, чем фактический экран, ширина элемента наследуется от layoutviewport, который используется для обеспечения того, чтобы внешний вид веб-сайта был таким же, как в настольном браузере. Ширина layoutviewport зависит от каждого браузера. Сафари iPhone составляет 980 пикселей, которое получается через document.documentElement.clientWidth.
- visualviewport: страница, отображаемая в данный момент на экране, то есть ширина видимой области браузера.
- Idealviewport: идеальная область просмотра, определенная для браузера, которая может быть идеально адаптирована к мобильному терминалу. Она фиксированная и может рассматриваться как ширина области просмотра устройства. Например, iphone 7 — 375 пикселей, iphone 7p — 414 пикселей.
1.3 настройки окна просмотра
Мы можем эффективно управлять отображением веб-страниц, установив несколько окон просмотра.На мобильной стороне мы часто видим этот код в теге head:
<meta name='viewport' content='width=device-width,initial-scale=1,user-scale=no' />Установив три области просмотра метатега, страница, наконец, отображается идеально. Ниже приводится подробное объяснение его конкретного значения:
- width устанавливает ширину layoutviewport
- Initial-scale задает начальное значение масштабирования страницы, и это начальное значение масштабирования масштабируется относительно perfectviewport. Конечный результат не только определяет визуальный, но и влияет на layoutviewport.
- user-scalable Разрешить ли пользователям увеличивать и уменьшать масштаб
Приведенное выше описание дополнительно поясняется выводом формулы:
// 设定两个变量：
viewport_1 = width;
viewport_2 = idealviewport / initial-scale;
// 则：
layoutviewport = max{viewport_1, viewport_2};
visualviewport = viewport_2;Пока layoutviewport === visualviewport, под страницей не будет полос прокрутки, и по умолчанию масштабирование страницы будет увеличиваться или уменьшаться.
1.4 пример окна просмотра
Далее следует рассчитать разные вьюпорты, изменив значения нескольких параметров метавьюпорта:
| width | initial-scale | layoutviewport | visualviewport | idealviewport | прокручивать ли |
|---|---|---|---|---|---|
| - | - | 980px | 980px | 375px | нет |
| device-width | 1 | 375px | 375px | 375px | нет |
| device-width | 2 | 375px | 188px | 375px | да |
| device-width | 0.5 | 750px | 750px | 375px | нет |
| 480px | 1 | 480px | 375px | 375px | да |
| 480px | 2 | 480px | 188px | 375px | да |
| 480px | 0.5 | 750px | 750px | 375px | нет |
Выше приведены тестовые данные для iphone 6/7/8, и как бы ни был установлен вьюпорт, он имеет критическое значение, а именно: 75
1.5 Зачем устанавливать область просмотра
Настройка области просмотра не влияет на страницы ПК, но важна для мобильных страниц. Проиллюстрируем на примере:
- Запросы СМИ @media В адаптивном макете макет с несколькими терминалами будет адаптирован в соответствии с функцией медиа-запроса, и необходимо установить область просмотра, в противном случае визуальная ширина не может быть правильно сопоставлена в соответствии с запрошенным размером, что приведет к путанице макета. Если параметр viewport не установлен, результатом запроса мобильного медиа будет параметр макета узла 980 пикселей, а не параметр макета в диапазоне 768 пикселей, который мы обычно устанавливаем
- Поскольку dpr большинства мобильных телефонов больше не равен 1, для создания страниц с высокой точностью мы обычно даем черновик дизайна 750 пикселей, тогда нам нужно установить параметры области просмотра для выполнения общего преобразования, вместо того, чтобы устанавливать размер каждый раз Преобразование длины.
2. Соотношение пикселей устройства dpr и физический пиксель 1px
2.1 Физический пиксель
Наименьшая единица, отображаемая на экране мобильного телефона, наименьшая единица имеет свойства цвета и яркости, которые необходимо установить, iphone6, 7, 8: 750 * 1334, iphone6+, 7+, 8+: 1242 * 2208
2.2 Аппаратно-независимые пиксели (пиксели, независимые от плотности)
Это логический пиксель, точка в устройстве компьютера, и набор пикселей в css относится к этому пикселю. Задолго до того, как появились экраны Retina, аппаратно-независимые пиксели были равны физическим пикселям.
2.3 соотношение пикселей устройства
Соотношение пикселей устройства (dpr) = Физические пиксели / Независимые от устройства пиксели. Например, dpr iphone 6, 7 и 8 равно 2, тогда аппаратно-независимый пиксель равен 4 физическим пикселям, поэтому 1px, установленный в css, занимает 2 физических пикселя на его экране, а 0,5px соответствует его наименьшей единице, которая может отображаться. Вот почему 1px становится толще на экранах Retina, и есть много способов это исправить.
2.4 Физический пиксель 1px
Из обсуждения в первой части видно, что начальный масштаб окна просмотра влияет на масштабирование страницы. Для экрана с dpr=2 1 пиксель сжимается наполовину, чтобы соответствовать соотношению пикселей устройства, равному 1 пиксель, чего можно добиться, установив коэффициент масштабирования начального масштаба равным 0,5=1/2. По аналогии, экран с dpr=3 можно реализовать, задав для начального масштаба значение 0,33=1/3.
3. Схема адаптации соотношения пикселей устройства dpr и rem
Комбинируя части 2 и 3, можно реализовать минимальную единицу экрана в 1 пиксель физического пикселя. Исходя из этого, черновик дизайна 750 пикселей, обычно предоставляемый дизайном, может быть идеально адаптирован к различным моделям. Использование rem - это решение. Путь.
3.1 Как установить рем
rem вычисляется относительно размера шрифта корневого элемента html. Обычно, когда страница загружается во время инициализации, вызываяdocument.documentElement.style.fontSizeнастройки для достижения.
3.2 правила адаптации rem
Установив initial-scale = 1/dpr, описание экрана было преобразовано из физических пикселей в физические пиксели, которые будут основой для последующего вывода, а черновой вариант дизайна составляет 750 пикселей.
- Физический пиксель 750=375*2, если экран разделить на 10 равных частей, то 1рем = 75px, 10rem = 750px;
- Физический пиксель 1125=375*3, если экран разделить на 10 равных частей, то 1рем = 112,5px, 10rem = 1125px;
- Физический пиксель 1242=414*3, если экран разделить на 10 равных частей, то 1рем=124,2px, 10rem=1242px;
Таким образом, можно сделать вывод, как устанавливается rem:
document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';Ниже мы будем использовать baseFont для представления значения пикселя, представленного 1rem до 750px, тогда в случае baseFont = 75 оно делится на 10 равных частей. Поэтому приведенную выше формулу можно немного обобщить:
document.documentElement.style.fontSize = document.documentElement.clientWidth / ( 750 / 75 ) + 'px';Общая настройка может относиться к следующему коду:
(function (baseFontSize) {
const _baseFontSize = baseFontSize || 75;
const ua = navigator.userAgent;
const matches = ua.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i);
const isIos = navigator.appVersion.match(/(iphone|ipad|ipod)/gi);
const dpr = window.devicePixelRatio || 1;
if (!isIos && !(matches && matches[1] > 534)) {
// 如果非iOS, 非Android4.3以上, dpr设为1;
dpr = 1;
}
const scale = 1 / dpr;
const metaEl = document.querySelector('meta[name="viewport"]');
if (!metaEl) {
metaEl = document.createElement('meta');
metaEl.setAttribute('name', 'viewport');
window.document.head.appendChild(metaEl);
}
metaEl.setAttribute('content', 'width=device-width,user-scalable=no,initial-scale=' + scale + ',maximum-scale=' + scale + ',minimum-scale=' + scale);
document.documentElement.style.fontSize = document.documentElement.clientWidth / (750 / _baseFontSize) + 'px';
})();При этом для удобства написания можно напрямую передать px layout, а потом с помощью библиотеки pxtorem преобразовать его в rem-based layout при упаковке.
4. Схема адаптации блока просмотра
ширина области просмотраwindow.innerWidthи высота области просмотраwindow.innerHeightОн разбит на 100 равных частей, и под вьюпортом здесь правильнее понимать идеальный вьюпорт, и он не изменится при разных настройках вьюпорта.
- vw : 1vw составляет 1% от ширины области просмотра.
- vh : 1vh составляет 1% от высоты окна просмотра.
- vmin : меньшее из vw и vh
- vmax : выберите большее из vw и vh
Если дизайн 750px, то 1vw = 7,5px и 100vw = 750px. По сути, неважно, на что рассчитан эскизный проект, а окончательный перевод в относительных единицах, упомянутый выше рем — это тоже его имитация. Пропорциональное отношение здесь тоже не рекомендуется конвертировать самостоятельно, с помощью библиотеки pxtoviewport нам в этом помочь. Конечно, у каждой схемы будут свои недостатки, о которых здесь речь не пойдет.
Суммировать
В мобильной разработке понимание окна просмотра имеет решающее значение для адаптации. Поэтому эта статья начинается с обсуждения окна просмотра, которое ведет к основным темам, связанным с адаптацией, таким как 1px, rem и vw/vh. Приведенные ниже справочные статьи более подробны в некоторых местах для справки.
Справочная статья
woohoo.quirkstouch.org/Mobile/view…
Woohoo. Я 3 от prussian.com/Mobile/Church-…
Woohoo. Я 3 от prussian.com/CSS/VW-foru-…