Руководство по адаптации мобильных терминалов 2022 г. — самая последняя и самая полная сеть

С мобильной стороны, хотя большинство ядер браузеров в целом являются webkit, и большинство из них поддерживают весь синтаксис css3. Однако из-за разных размеров экрана и разрешения мобильных телефонов вам необходимо рассмотреть проблему горизонтальных и вертикальных экранов или рассмотреть различные вопросы совместимости мобильных терминалов. В настоящее время вам нужно решить проблему отображения на разных мобильных телефонах и в разных ситуациях, поэтому вам нужно готовое и эффективное решение для адаптации мобильного терминала.

1. Базовые очки знаний

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

1.1. Адаптивный дизайн — пиксели

Существует три типа единиц пикселей: пиксели устройства, логические пиксели и пиксели CSS.

1.1.1, пиксель устройства, разрешение устройства

Пиксели устройства также называются физическими пикселями, которые относятся к реальным пикселям на дисплее.Размер каждого пикселя является неотъемлемым свойством экрана и не изменится после того, как экран покинет завод.
Разрешение устройства описывает, сколько пикселей устройства составляет ширина и высота дисплея, например, разрешение обычного дисплея 1920*1080.
Пиксель устройства и разрешение устройства управляются операционной системой. Браузер не знает и не должен знать размер разрешения устройства. Он в основном рассчитывается в соответствии с логическим разрешением (представленным в следующем разделе).

1.1.2, аппаратно-независимые пиксели, логическое разрешение

Независимые от устройства пиксели (пиксели, независимые от устройства) – это единица пикселей, определяемая операционной системой. Прикладная программа информирует операционную систему о независимых от устройства пикселях, а затем операционная система преобразует независимые от устройства пиксели в пиксели устройства, тем самым контролируя реальный физический пикселей на экране.
Зачем вам нужно определять такую единицу между пикселями приложения и устройства? Почему приложения не должны напрямую использовать пиксели устройства?
Например, на исходном экране дисплея с разрешением устройства 1280×720 отображается шрифт высотой 12 пикселей устройства, а теперь он размещен на экране дисплея с разрешением устройства 2560×1440. Если вы хотите чтобы получить исходный размер, вам нужно шрифты 24. Пиксели устройства, если приложение использует пиксели устройства напрямую, становится очень сложно написать приложение, и необходимо написать логику приложения: шрифт имеет высоту 12 пикселей устройства на некоторых экранах. , а на других требуется 24 пикселя устройства.
Таким образом, операционная система определяет единицу измерения: независимый от устройства пиксель. Операционная система гарантирует, что размеры, определенные в аппаратно-независимых пикселях, могут отображаться в соответствующем размере независимо от параметров экрана (это также является источником названия аппаратно-независимых пикселей). Как это делает операционная система? Для экранов с высокой плотностью пикселей разделите несколько пикселей устройства на один логический пиксель. Сколько пикселей устройства делится на логический пиксель, определяется операционной системой.
Для приведенного выше примера: «Шрифт, высота которого составляла 12 пикселей устройства, теперь имеет высоту 24 пикселя устройства, чтобы получить тот же размер». нужно изменить, и отображаемый размер примерно одинаков как на новых, так и на старых устройствах.

Каково соотношение между пикселями, независимыми от устройства, и пикселями устройства?Производители дисплеев и производители операционных систем проводят исследования, чтобы определить соотношение, наиболее благоприятное для просмотра. Как правило, чем выше плотность пикселей экрана, тем больше пикселей устройства требуется для отображения независимого от устройства пикселя.

Логическое разрешение - это ширина экранаВысокий для представления (единица измерения: пиксель, не зависящий от устройства), мы меняем размер независимого от устройства пикселя с помощью настройки разрешения операционной системы. Например, разрешение экрана устройства 1920.1200 (единица измерения: пиксель устройства), мы можем установить логическое разрешение 1280*800 (единица измерения: независимый от устройства пиксель) при текущем разрешении. Тогда количество пикселей устройства в горизонтальном и вертикальном направлениях ровно в 1,5 раза превышает количество независимых пикселей устройства. Это также означает, что длина стороны независимого от устройства пикселя в 1,5 раза больше длины стороны пикселя устройства.

1.1.3 CSS-пиксели

px, используемый в CSS, относится к пикселям CSS, например, ширина: 128 пикселей. Размер css пикселей легко изменить, когда мы масштабируем страницу, количество css пикселей элемента не меняется, меняется только размер каждого css пикселя. То есть после того, как элемент с шириной: 128 пикселей масштабируется на 200%, ширина по-прежнему составляет 128 пикселей CSS, но ширина и высота каждого пикселя CSS удваиваются. Если исходная ширина элемента составляла 128 пикселов, не зависящих от устройства, то ширина элемента после масштабирования на 200 % составляет 256 пикселов, не зависящих от устройства.

(1) Взаимосвязь между пикселями CSS и аппаратно-независимыми пикселями.

Коэффициент масштабирования — это длина стороны пикселя css/независимая от устройства длина стороны пикселя;
При масштабировании 100% размер 1 пикселя css равен 1 независимому от устройства пикселю;
При масштабировании 200% размер 1 пикселя css равен (2 * 2) пикселям, не зависящим от устройства;

(2) Связь между пикселями CSS и пикселями устройства

Соотношение пикселей устройства window.devicePixelRatio, devicePixelRatio = (на строке одинаковой длины) количество пикселей устройства / количество пикселей CSS. Это соотношение также эквивалентно длине стороны пикселя CSS/длине стороны пикселя устройства. Например, devicePixelRatio = 2 означает, что на прямой одинаковой длины количество пикселей устройства в 2 раза превышает количество пикселей CSS, поэтому длина стороны пикселей CSS в 2 раза больше, чем у пикселей устройства. Масштабирование приводит к изменению длины стороны пикселя CSS, что, в свою очередь, приводит к изменению window.devicePixelRatio!

1.2. Адаптивный дизайн — вьюпорт

Область просмотра представляет собой видимую область браузера, то есть часть браузера, используемую для отображения веб-страницы. Существует три окна просмотра: окно просмотра макета, визуальное окно просмотра и идеальное окно просмотра, далее мы представим три из них.

1.2.1, окно просмотра макета

Окно просмотра макета — это окно просмотра макета, то есть область макета веб-страницы.Это родительский контейнер элемента html.Пока ширина элемента не изменяется в css, ширина элемента заполнит ширину окна просмотра макета.
Много раз окно браузера не может отобразить полное изображение видового экрана макета, но он действительно был загружен.В это время появляется полоса прокрутки, и вам нужно использовать полосу прокрутки для просмотра других частей видового экрана макета.
Окно просмотра макета измеряет свой размер в пикселях css и не изменяется при масштабировании или изменении размера окна браузера. Масштабирование и изменение размера окна браузера изменяет только визуальное окно просмотра.

В настольных браузерах при масштабе 100 % ширина области просмотра макета равна ширине окна содержимого. (Вы вряд ли когда-нибудь увидите горизонтальную полосу прокрутки на компьютере, если не отрегулируете масштаб)
Но на мобильной стороне, когда масштаб составляет 100%, область просмотра макета не обязательно равна размеру окна содержимого. Когда вы просматриваете большие веб-страницы (которые не предназначены для быстрого реагирования) на своем телефоне, вы можете просматривать только одну часть страницы за раз, а затем пролистывать другие части пальцем. Это означает, что вся веб-страница (Вьюпорт макета) загружена, но вы должны просматривать ее по частям.

1.2.2, визуальный вьюпорт

Визуальное окно просмотра — это визуальное окно просмотра, представляющее собой область веб-страницы, отображаемую на экране, которая часто отображает только часть окна просмотра макета.
Окно визуального просмотра похоже на камеру, а окно просмотра макета похоже на лист бумаги, вы можете видеть, на какую часть бумаги направлена камера. Вы можете изменить размер области съемки камеры (изменить размер окна браузера), вы также можете отрегулировать расстояние камеры (отрегулировать коэффициент масштабирования), эти методы могут изменить визуальный вьюпорт, но вьюпорт компоновки всегда один и тот же.

1.2.3, идеальный вьюпорт

Идеальная область просмотра — это идеальная область просмотра. У разных устройств есть своя идеальная область просмотра. Ширина идеальной области просмотра равна ширине экрана мобильного устройства, поэтому она является наиболее подходящей областью просмотра для мобильных устройств. Пока ширина элемента установлена равной ширине идеального окна просмотра в css (единица измерения — px), тогда ширина этого элемента равна ширине экрана устройства, то есть эффект ширины равен 100%. . Значение идеального окна просмотра заключается в том, что независимо от разрешения экрана веб-сайты, предназначенные для идеального окна просмотра, могут быть идеально представлены пользователям без необходимости ручного масштабирования или горизонтальных полос прокрутки.

1.2.4 Используйте метатеги для управления окном просмотра

Область просмотра по умолчанию для мобильных устройств — это область просмотра макета, которая шире экрана, но при разработке веб-сайтов для мобильных устройств нам нужна идеальная область просмотра. Итак, как мы можем получить идеальное окно просмотра?
Когда мы разрабатываем страницы h5, наиболее распространенными тегами являются следующие:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

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

width	Установите ширину области просмотра макета в виде положительного целого числа или строки «width-device».
height	Установите начальное значение масштабирования страницы в виде числа с десятичными знаками.
initial-scale	Минимальное значение масштабирования, разрешенное пользователем, в виде числа с десятичными знаками.
minimum-scale	Максимальное значение масштабирования, разрешенное пользователем, в виде числа с десятичными знаками.
maximum-scale	Устанавливаем высоту вьюпорта макета, это свойство нам не важно и редко используется
user-scalable	Разрешить ли пользователю масштабирование, значение «нет» или «да», нет означает не разрешено, да означает разрешено

2. Выбор программы

В разные периоды исторического развития фронтенд-тренда появлялись очень репрезентативные схемы адаптации, которые кратко представлены ниже.

2.1 Медиа-запрос с использованием css @media

Свойства мультимедийного запроса на основе CSS @media Напишите различные размеры свойств CSS для мобильных устройств с разными размерами экрана, как показано в примере ниже. Хотя этот метод может в определенной степени решить проблему адаптации мобильных устройств, мы также видим, что у него есть следующие проблемы, поэтому он почти устранен исторической тенденцией.

Все элементы на странице должны определять разные размеры в разных @media, что немного дорого;
Если есть еще один размер экрана, напишите еще один блок запроса @media;

@media only screen and (min-width: 375px) {
  .logo {
    width : 62.5px;
  }
}

@media only screen and (min-width: 360px) {
  .logo {
    width : 60px;
  }
}

@media only screen and (min-width: 320px) {
  .logo {
    width : 53.3333px;
  }
}

2.2 Использование единицы rem

rem (размер шрифта корневого элемента) относится к единице размера шрифта относительно корневого элемента.Если мы установим размер шрифта html на 16 пикселей, если нам нужно установить размер шрифта элемента на 16 пикселей, напишите это как 1рем. Тем не менее, он по-прежнему должен использовать атрибут @media для установки разных размеров шрифта для устройств разного размера.По сравнению с предыдущей схемой это может снизить стоимость повторного написания одних и тех же атрибутов.Простой пример показан ниже.
Мы также можем увидеть следующие проблемы с этой схемой:

Для разных размеров нужно написать несколько @media;
Во всех местах, связанных с использованием rem, необходимо вызывать метод calc() , что также довольно хлопотно;

@media only screen and (min-width: 375px) {
  html {
    font-size : 375px;
  }
}

@media only screen and (min-width: 360px) {
  html {
    font-size : 360px;
  }
}

@media only screen and (min-width: 320px) {
  html {
    font-size : 320px;
  }
}

//定义方法：calc
@function calc($val){
    @return $val / 1080;
}

.logo{
	width : calc(180rem);
}

2.3, гибкая схема адаптации

Чтобы улучшить схему rem, мы можем использовать js для динамической установки корневого шрифта Типичным представителем этой схемы являетсягибкое адаптационное решение.

2.3.1. Используйте rem для имитации функции vw для адаптации к разным размерам экрана.

Его основной код выглядит следующим образом

// set 1rem = viewWidth / 10
function setRemUnit () {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
}
setRemUnit();

В приведенном выше коде размер шрифта узла html установлен равным 1/10 части страницы clientWidth (окно просмотра макета), то есть 1rem равен 1/10 области просмотра макета страницы, что означает, что rem мы использовать позже, все рассчитывается в соответствии с соотношением страниц.

2.3.2. Управляйте шириной и значением масштаба области просмотра, чтобы адаптироваться к экрану высокой мощности.

Установите ширину окна просмотра на ширину устройства и измените ширину окна просмотра браузера по умолчанию (окно просмотра макета и визуальное окно просмотра) на идеальную ширину окна просмотра, чтобы пользователь мог видеть полное содержимое окна просмотра макета в идеальном окне просмотра.
Установите значения начального масштаба, максимального масштаба и минимального масштаба области просмотра в равных пропорциях, чтобы достичь 1 физического пикселя = 1 пикселю CSS, чтобы адаптироваться к эффекту отображения экрана с большим увеличением. (здесь можно избежать известной «проблемы 1px»).

var metaEL= doc.querySelector('meta[name="viewport"]');
var dpr = window.devicePixelRatio;
var scale = 1 / dpr
metaEl.setAttribute('content', 'width=device-width, initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

2.3.3, гибкие дефекты

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

Из-за масштабирования стиль видеоплеера тега видео сильно отличается на разных устройствах dpr;
Если вы изучали исходный код lib-flexible, то должны знать специальную обработку lib-flexible для телефонов Android, а именно: всегда иметь дело с dpr = 1;

if (isIPhone) {
  // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
  if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {                
    dpr = 3;
  } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
    dpr = 2;
  } else {
    dpr = 1;
  }
} else {
  // 其他设备下，仍旧使用1倍的方案
  dpr = 1;
}

Он больше не совместим с адаптивным макетом @media, поскольку оператор запроса размера используется в синтаксисе @media, размер запроса основан на физических пикселях текущего устройства и теории гибкого макета (т. е. область просмотра пропорционально масштабируется для разных устройств dpr).

Фактически, гибкое решение имитирует функцию области просмотра, но с развитием и совместимостью браузеров область просмотра стала совместимой с большинством основных браузеров, и проблемы, существующие в гибком решении, почти вышли из исторической тенденции. Цитироватьlib-flexibleОригинальные слова домашней страницы github:

Поскольку блок просмотра совместим со многими браузерами, от схемы перехода lib-flexible можно отказаться, будь то текущая версия или предыдущая версия, есть определенные проблемы. В качестве альтернативы этому решению рекомендуется начать использовать видовые экраны.

2.4, схема адаптации видового экрана

Поскольку модуль окна просмотра совместим со многими браузерами, текущее решение для адаптации мобильного терминала на основе окна просмотра используется основными заводскими командами.

Как единица компоновки, vw принципиально решает проблему адаптации к экранам разного размера, потому что процентное соотношение каждого экрана фиксировано, предсказуемо и управляемо. Концепции, связанные с окном просмотра, следующие:

vw: сокращение от ширины области просмотра, 1vw равно 1% от window.innerWidth;
vh: Подобно vw, это сокращение высоты области просмотра, 1vh равно 1% от window.innerHeihgt;
vmin: значение vmin меньше текущего значения vw и vh;
vmax: значение vmax больше текущего значения vw и vh;

Предполагая, что ширина полученного нами визуального наброска равна 750px, а определенный размер шрифта в визуальном наброске равен 75px, то наше css-свойство нужно всего лишь написать следующим образом, и нет необходимости использовать дополнительные js для его установки, ни масштабировать экран и т. д.;

.logo {
  font-size: 10vw; // 1vw = 750px * 1% = 7.5px
}

2.4.1. Установка метатегов

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

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

2.4.2, px автоматически преобразуется в vw

Дизайнеры обычно дают визуальные наброски шириной 375 пикселей или 750 пикселей.Если мы принимаем схему vw, нам нужно преобразовать соответствующую единицу размера элемента px в единицу vw, что является фактором, влияющим на эффективность разработки (требуется ручной расчет для преобразования px в vw) И не способствует последующему сопровождению кода (куча vw юнитов в css коде, не такой интуитивно понятный как px); благо сообщество предоставляетpostcss-px-to-viewportПлагин для автоматического преобразования px в vw. Соответствующие шаги настройки следующие:

(1) Установите плагин

npm install postcss-px-to-viewport --save-dev

(2) конфигурация веб-пакета

Официальный сайт использует glup для настройки, но в нашем шаблоне проекта мы используем webpack для настройки плагинов postcss и плагинов родственного стиля, поэтому мы используем webpack для настройки и используем без дополнительного введения компиляции gulp; соответствующая конфигурация webpack выглядит следующим образом, и каждый атрибут Значение представления отмечено:

module.exports = {
  plugins: {
    // ...
    'postcss-px-to-viewport': {
      // options
      unitToConvert: 'px',    // 需要转换的单位，默认为"px"
      viewportWidth: 750,     // 设计稿的视窗宽度
      unitPrecision: 5,       // 单位转换后保留的精度
      propList: ['*', '!font-size'],        // 能转化为 vw 的属性列表
      viewportUnit: 'vw',     // 希望使用的视窗单位
      fontViewportUnit: 'vw', // 字体使用的视窗单位
      selectorBlackList: [],  // 需要忽略的 CSS 选择器，不会转为视窗单位，使用原有的 px 等单位
      minPixelValue: 1,       // 设置最小的转换数值，如果为 1 的话，只有大于 1 的值会被转换
      mediaQuery: false,      // 媒体查询里的单位是否需要转换单位
      replace: true,          // 是否直接更换属性值，而不添加备用属性
      exclude: undefined,     // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
      include: /\/src\//,     // 如果设置了include，那将只有匹配到的文件才会被转换
      landscape: false,       // 是否添加根据 landscapeWidth 生成的媒体查询条件
      landscapeUnit: 'vw',    // 横屏时使用的单位
      landscapeWidth: 1125,   // 横屏时使用的视窗宽度
    },
  },
};

Соответствующие свойства конфигурации можно увидеть с первого взгляда через комментарии.Точка, которая должна быть подчеркнута, это свойство propList.Мы настроили размер шрифта, чтобы не преобразовывать vw, что означает, что размер шрифта при разных размерах экрана мобильного телефона является такой же. Среди них вопрос о том, нужно ли адаптировать размер шрифта в соответствии с размером экрана или как это сделать, всегда был предметом споров; учитывая, что у нас нет требований к планшету на мобильном терминале, и мы проконсультировались с командой бизнес-дизайнеры, используются вышеуказанные шаблоны по умолчанию.Конфигурация, конечно, если ваше видение требует, чтобы ваш проект адаптировал размер шрифта, вы можете изменить конфигурацию свойства propList.

(3) Отображение эффектаВ коде проекта мы делаем следующую кодировку css:

.hello {
  color: #333;
  font-size: 28px;
}

Запустив проект, мы видим, что на странице, отображаемой браузером, postcss-px-to-viewport выполнил для нас преобразование px -> vw, как показано ниже:

2.4.3 Отметьте атрибуты, которые не нужно преобразовывать

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

/* px-to-viewport-ignore-next */ —> Не преобразовывать следующую строку.
/* px-to-viewport-ignore */ —> Текущая строка не конвертируется

/* example input: */
.class {
  /* px-to-viewport-ignore-next */
  width: 10px;
  padding: 10px;
  height: 10px; /* px-to-viewport-ignore */
}

/* example output: */
.class {
  width: 10px; 
  padding: 3.125vw;
  height: 10px;
}

2.4.4 Зарезервированная яма для экрана Retina

Учитывая сцену экрана Retina, могут быть требования к уровню высокой четкости изображения, 1px и другим сценам, поэтому мы оставляем за собой право судить о положении ямы экрана Retina. Соответствующие решения следующие: оценка dpr и настройка data-dpr выполняются на html-странице входа, затем в файле css проекта могут быть записаны разные классы стиля в соответствии с разными dprs в соответствии со значением data- дпр;

(1) файл index.html

// index.html 文件
const dpr = devicePixelRatio >= 3? 3: devicePixelRatio >= 2? 2: 1;
document.documentElement.setAttribute('data-dpr', dpr);

(2) файл стиля

[data-dpr="1"] .hello {
  background-image: url(image@1x.jpg);

[data-dpr="2"] .hello {
  background-image: url(image@2x.jpg);
}
  
[data-dpr="3"] .hello {
  background-image: url(image@3x.jpg);
}

3. Лучшие практики для определенных сценариев

3.1 Сцена в встроенном стиле

Сцены: Когда вам нужно написать встроенный код стиля (стиль),postcss-px-to-viewportПлагин не может преобразовать единицу px, вам нужно вручную рассчитать vw;

Лучшие практики: обрабатывайте такие сценарии, добавляя, изменяя и удаляя className вместо прямого манипулирования встроенными стилями, что больше соответствует передовой практике изоляции js и css.

3.2, проблема с 1 пикселем

Проблема 1px под экраном retina является распространенной проблемой.По сравнению с обычными экранами линия 1px экрана retina будет казаться толще, и эстетика дизайна будет отсутствовать.В глазах визуальных дизайнеров 1px относится к 1px пикселя устройства, а если прямо написать css Размер 1px, то при dpr=2 он равен 2px устройства пикселя, а при dpr=3 равен 3px устройства пикселя. Так что для сцен, требующих обработки 1px, приходится делать специальную обработку.
Ниже приведены некоторые часто используемые методы

3.2.1, преобразование: масштаб (0,5)

Вы можете использовать transform: scale(0.5) для масштабирования осей X и Y, как показано в следующем примере.

.class1 {
  height: 1px; 
  transform: scaleY(0.5);
}

Преимущество в том, что его просто написать, но реализовать четыре границы будет сложнее, а если будет вложенность, то она повлияет на содержащиеся элементы, поэтому используйте ее в сочетании с :before и :after.

3.2.2, преобразование: масштаб(0,5) + :до / :после (рекомендуется)

Этот метод может решить, например, сцену, где верхняя, нижняя, левая и правая границы метки имеют размер 1 пиксель, а также сцену, в которой есть вложенные элементы. Это более распространено. Пример выглядит следующим образом.

.calss1 {
  position: relative;
  &::after {
    content:"";
    position: absolute;
    bottom:0px;
    left:0px;
    right:0px;
    border-top:1px solid #666;
    transform: scaleY(0.5);
  }
}

3.2.3, тень блока

Используйте CSS для обработки теней, чтобы имитировать границы. Пример следующий, с линией внизу. Недостаток в том, что тени выглядят некрасиво.

  .class1 {
    box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.5);
  }

3.2.4 Прочее

Также есть следующие способы борьбы с проблемой 1px, но это не рекомендуется, просто поймите

область просмотра: уменьшить страницу;
border-image: вырежьте изображение размером 1 пиксель для имитации;
background-image: вырежьте изображение размером 1 пиксель для имитации;
linear-gradient: добиться линии толщиной 1 пиксель на мобильной стороне с помощью линейного градиента;
svg: основан на векторной графике (svg), масштабируется под различные характеристики экрана устройства.

3.3, проблема изображений высокой четкости

Проблема изображений высокой четкости:

Если изображение для обычного экрана находится на экране Retina, отображение изображения будет размытым;
Для изображений, подходящих для экранов Retina, на обычных экранах на дисплее изображения не будет хроматической аберрации, резкости и пропускной способности;

Поэтому, если у вас высокие требования к производительности и эстетике, вам необходимо различать и использовать соответствующие изображения в соответствии с dpr.Схему dpr мы оставляем для экранов retina в схеме адаптации вьюпорта статьи.Соответствующий css написан следующим образом:

[data-dpr="1"] .hello {
  background-image: url(image@1x.jpg);

[data-dpr="2"] .hello {
  background-image: url(image@2x.jpg);
}
  
[data-dpr="3"] .hello {
  background-image: url(image@3x.jpg);
}

4. Решение для адаптации iPhoneX

В iPhoneX отменили физическую кнопку и заменили ее на маленькую черную полоску внизу, что вызвало более неприятную проблему с адаптацией экрана на веб-странице. Для веб-страниц браузер уже разобрался с проблемой адаптации вверху (челка), поэтому нам нужно обратить внимание только на проблему адаптации между низом и маленькой черной полосой (то есть обычная навигация по низу, возврат наверх и т. д. элементы, расположенные относительно нижнего фиксированного положения). Например, некоторые кнопки, которые нужно вставить внизу, а также вытянутый tabBar и нижнее всплывающее окно, на iPhoneX будут перекрыты маленькими черными полосами, или на странице будут белые пробелы. Скриншоты до и после обработки выглядят следующим образом

4.1 Несколько новых знаний, которые нужно знать перед адаптацией

4.1.1 Безопасная зона

Безопасная область относится к видимому диапазону окна. Содержимое в безопасной области не зависит от углов, корпуса датчика и индикатора Home, как показано в синей области на следующем рисунке:

То есть, если мы хотим хорошо адаптироваться, мы должны убедиться, что видимая и рабочая область страницы находится в пределах безопасной области. Более подробные инструкции см. в документации:Human Interface Guidelines - iPhoneX

4.1.2, окно просмотра

Новая функция в iOS11, Apple может установить три значения, чтобы адаптироваться к расширению существующего метатега области просмотра для iPhoneX, который используется для установки макета веб-страниц в визуальном окне.

содержат: видимое окно полностью содержит веб-контент (левое изображение)
обложка: содержимое веб-страницы полностью закрывает видимое окно (справа)
auto: значение по умолчанию, совместимое с содержанием

Примечание: по умолчанию viewport-fit=contain не добавляет расширения на веб-страницу.Если вам нужно адаптироваться к iPhoneX, вы должны установить viewport-fit=cover, что является ключевым шагом в адаптации. Более подробные инструкции см. в документации:viewport-fit-descriptor

4.1.3 env() и константа()

Новая функция iOS11, функция CSS Webkit, используется для установки расстояния между безопасной зоной и границей.Есть четыре предопределенных переменных:

safe-area-inset-left: расстояние от безопасной зоны до левой границы
safe-area-inset-right: расстояние от безопасной зоны до правой границы
safe-area-inset-top: расстояние от верхней границы безопасной области
safe-area-inset-bottom: расстояние от нижней границы безопасной области

Здесь нам нужно только обратить внимание на переменную safe-area-inset-bottom, потому что она соответствует высоте маленькой черной полосы (значение отличается для горизонтального и вертикального экранов).

Примечание: env() не работает, когда viewport-fit=contain и должен использоваться с viewport-fit=cover . Для браузеров, которые не поддерживают env(), браузер проигнорирует его.

Следует отметить, что ранее использовавшуюся константу() нельзя использовать после iOS 11.2, но нам все равно нужно сделать обратную совместимость, например так:

padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */

Примечание: env() и Constant() должны существовать одновременно, и порядок их нельзя изменить. Более подробные инструкции см. в документации:Designing Websites for iPhone X

4.2. Этапы адаптации

4.2.1 Установить макет веб-страницы в визуальном окне

Добавлен атрибут viweport-fit, чтобы содержимое страницы полностью покрывало все окно.Как упоминалось ранее, env() можно использовать только в том случае, если установлено значение viewport-fit=cover.

	<meta name="viewport" content="width=device-width, viewport-fit=cover">

4.2.2 Адаптация неподвижной полной сцены поглощающего дно элемента

Высоту можно увеличить, добавив отступы:

{
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

Или перезапишите исходную высоту, вычислив функцию calc:

{
  height: calc(60px(假设值) + constant(safe-area-inset-bottom));
  height: calc(60px(假设值) + env(safe-area-inset-bottom));
}

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

Другое решение — добавить новый элемент (пустой цветной блок, в основном используемый для заполнителя высоты маленькой черной полосы), а затем нижний элемент можно отрегулировать без изменения высоты, вот так:

{
  margin-bottom: constant(safe-area-inset-bottom);
  margin-bottom: env(safe-area-inset-bottom);
}

Пустой цветовой блок:

{
  position: fixed;
  bottom: 0;
  width: 100%;
  height: constant(safe-area-inset-bottom);
  height: env(safe-area-inset-bottom);
  background-color: #fff;
}

4.2.3. Адаптация фиксированных неполных сцен поглощающего дно элемента

Таким образом, только позиция должна быть скорректирована вверх, что может быть обработано только нижним полем margin-bottom.

{
  margin-bottom: constant(safe-area-inset-bottom);
  margin-bottom: env(safe-area-inset-bottom);
}

Кроме того, вы также можете перезаписать исходное нижнее значение, вычислив функцию calc:

{
  bottom: calc(50px(假设值) + constant(safe-area-inset-bottom));
  bottom: calc(50px(假设值) + env(safe-area-inset-bottom));
}

5. Совместимое с VW решение

Существуют определенные проблемы совместимости между Android 4.4 и iOS 8 и более ранними версиями (ps: почти исчезли, вы можете подсчитать долю версий системы, используемых вашими пользователями), но сообщество предлагает решение совместимости, которое представляет собой заполнение окна просмотра:Viewport Units Buggyfill, вы можете посетить его официальный сайт github для просмотра.
Мы также выполнили соответствующую практику, но, учитывая производительность, мы не будем вводить ее в наш шаблон проекта.Заинтересованные студенты могут проверить следующее резюме практики;

5.1, представлен баггифилл единиц просмотра

viewport-units-buggyfill имеет два основных файла JavaScript: viewport-units-buggyfill.js и viewport-units-buggyfill.hacks.js. Вам нужно только включить эти два файла в свой HTML-файл, например, index.html в проект реакции;

<script src="//g.alicdn.com/fdilab/lib3rd/viewport-units-buggyfill/0.6.2/??viewport-units-buggyfill.hacks.min.js,viewport-units-buggyfill.min.js"></script>

Второй шаг — вызвать viewport-units-buggyfill в файле HTML, например:

<script>
    window.onload = function () {
        window.viewportUnitsBuggyfill.init({
            hacks: window.viewportUnitsBuggyfillHacks
        });
    }
</script>

Но для того, чтобы баггифилл единиц области просмотра работал, мы должны добавить содержимое в наш файл стилей, где используются единицы области просмотра (vw, vh, vmin или vmax), например:

.my-viewport-units-using-thingie {
  width: 50vmin;
  height: 50vmax;
  top: calc(50vh - 100px);
  left: calc(50vw - 100px);

  /* hack to engage viewport-units-buggyfill */
  content: 'viewport-units-buggyfill; width: 50vmin; height: 50vmax; top: calc(50vh - 100px); left: calc(50vw - 100px);';
}

5.2, введение блоков postcss-viewport

На шаге 1 мы ввели атрибут content, который очень неэффективен.К счастью, сообщество предоставляет плагин postcss-viewport-units, который помогает нам автоматически обрабатывать контент:

5.2.1, конфигурация установки postcss-viewport-units

Мы выполняем следующую команду для установки плагина postcss-viewport-units:

tnpm i postcss-viewport-units --save-dev

В нашем файле конфигурации проекта webpack.config.js Выполняем соответствующую настройку импорта плагина:

{
  loader: 'postcss-loader',
  options: {
    ident: 'postcss',
    plugins: () => [
      // 我们加的配置
      require('postcss-viewport-units'),
    ],
    sourceMap: isProductionEnv,
  },
},

5.2.2 Отображение эффекта

В коде проекта мы кодируем следующим образом:

.hello {
  color: #333;
  font-size: 28px;
}

На отображаемой странице postcss-viewport-units добавил для нас свойство содержимого следующим образом:

Адрес блога на github: GitHub.com/ревматизм123/…, обобщает все блоги автора, добро пожаловать в подписку и звезду ~

6. Ссылки:

Отзывчивый дизайн — понимание пикселей устройства, независимых от устройства пикселей и пикселей CSS
Глубокое понимание области просмотра в мобильной фронтенд-разработке
Используйте Flexible, чтобы реализовать терминальную адаптацию ручной страницы Taobao H5.
VW: пора отказаться от компоновки REM
lib-flexible
postcss-px-to-viewport
Адаптация веб-страницы iPhoneX