Что нужно знать о мобильной адаптации

JavaScript CSS
Что нужно знать о мобильной адаптации

Управляемое чтение

Адаптация мобильного терминала — это то, с чем мы часто сталкиваемся в разработке, и здесь может быть много проблем:

  • 1pxвопрос
  • UIФигура идеально подходит
  • iPhoneXСхема адаптации
  • Горизонтальная экранная адаптация
  • Проблема с размытием изображения на HD-экране
  • ...

Возможно, мы уже знаем, как решить вышеуказанные проблемы в разработке, но принцип проблемы и принцип решения могут быть неоднозначными. В процессе решения этих задач мы часто сталкиваемся со многими понятиями: пиксели, разрешение,PPI,DPI,DP,DIP,DPR, область просмотра и т. д., можете ли вы действительно разобраться в этих понятиях?

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

один дюйм

Физический размер экрана обычно описывается в дюймах, например размер монитора компьютера.17,22, дисплей мобильного телефона4.8,5.7Все используемые единицы - дюймы.

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

дюйм(inch,сокращенноin) по-голландски означает большой палец, а дюйм — это ширина большого пальца среднего человека у основания ногтя.

Преобразование дюймов в сантиметры:1英寸 = 2.54 厘米

2. Разрешение

2,1 пикселя

Пиксель — это небольшой квадрат с определенным положением и цветом.

Картинки, электронные экраны (мобильные телефоны, компьютеры) состоят из бесчисленных маленьких квадратов с определенными цветами и определенными позициями.

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

Ниже мы используемsketchОткройте изображение:

Увеличьте эти изображения, чтобы увидеть эти пиксели:

Обычно существует два типа разрешений: разрешение экрана и разрешение изображения.

2.2 Разрешение экрана

Разрешение экрана — это количество пикселей, из которых состоит экран.

НижеappleОписание разрешения мобильного телефона на официальном сайте:

iPhone XS Maxа такжеiPhone SEРезолюции2688 x 1242а также1136 x 640. Это представляет собой количество пикселей телефона по вертикали и горизонтали.

Конечно, высокое разрешение не означает, что экран четкий, четкость экрана также связана с размером.

2.3 Разрешение изображения

что мы обычно говорим图片分辨率На самом деле картина содержит像素数, например, разрешение изображения800 x 400. Это означает, что количество пикселей изображения по вертикали и горизонтали равно800а также400.

Для изображений одинакового размера чем выше разрешение, тем четче изображение.

2.4 PPI

PPI(Pixel Per Inch): количество пикселей на дюйм.

PPIМожет использоваться для описания четкости экрана и качества изображения.

использоватьPPIПри описании картинокPPIЧем выше, тем выше качество изображения, используйтеPPIПри описании экранаPPIЧем выше, тем четче экран.

На картинке выше, описывающей разрешение телефона, мы видим:iPhone XS Maxа такжеiPhone SEизPPIсоответственно458а также326, чего достаточно, чтобы доказать, что экран первого более четкий.

Поскольку размер мобильного телефона - это длина диагональ мобильного телефона, мы обычно используем следующий метод для расчетаPPI:

? \frac{\sqrt{горизонтальные пиксели^2+вертикальные пиксели^2}}{размер}?

iPhone 6изPPIдля13342+75024.7=325.6 \frac{\sqrt{1334^2+750^2}}{4.7}=325.6, то он содержит около326физические пиксели.

2.5 DPI

DPI(Dot Per Inch): количество точек на дюйм.

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

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

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

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

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

Поэтому принтерDPIЧем он выше, тем четче будет напечатанное изображение, которое также потребует больше точек и времени.

3. Независимые от устройства пиксели

На самом деле все пиксели, которые мы описали выше,物理像素, фактическая физическая единица на устройстве.

Давайте взглянем设备独立像素Как именно это произошло:

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

Однако с развитием технологий мобильные телефоны с низким разрешением уже не могут удовлетворить наши потребности. Вскоре появились экраны с более высоким разрешением, такие как черный телефон ниже, который имел разрешение640x940, ровно в два раза больше, чем у белого телефона.

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

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

существуетiPhone4Используя экран Retina, поместите2x2пикселей, когда1используются пиксели, что делает экран более изысканным, но размер элементов не меняется.

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

Мы должны использовать единицу, чтобы одновременно сообщать телефонам с разным разрешением, какого размера они отображают элементы интерфейса, эта единица является независимым от устройства пикселем (Device Independent Pixels) короткоDIPилиDP. Выше мы сказали, что ширина списка равна300пикселей, фактически мы можем сказать: ширина списка300независимые от устройства пиксели.

Открытьchromeинструменты разработчика, мы можем имитировать отображение различных моделей мобильных телефонов, каждая модель будет отображать размер, напримерiPhone XОтображаемый размер375x812,действительныйiPhone XРазрешение будет намного выше, и здесь показаны независимые от устройства пиксели.

3.1 Соотношение пикселей устройства

соотношение пикселей устройстваdevice pixel ratioкороткое имяdpr, что представляет собой отношение физических пикселей к аппаратно-независимым пикселям.

существуетweb, браузер предоставляет намwindow.devicePixelRatioчтобы помочь нам получитьdpr.

существуетcss, вы можете использовать медиа-запросыmin-device-pixel-ratio,различатьdpr:

@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2){ }

существуетReact Native, мы также можем использоватьPixelRatio.get()получитьDPR.

Конечно, есть исключения из вышеперечисленных правил,iPhone 6、7、8 PlusФактические физические пиксели1080 x 1920, в инструментах разработчика мы видим: его независимый от устройства пиксель414 x 736, соотношение пикселей устройства равно3, произведение независимых от устройства пикселей и соотношений пикселей устройства не равно1080 x 1920, но равно1242 x 2208.

На самом деле, телефон автоматически1242 x 2208пикселей в1080 * 1920физические пиксели для рендеринга, нам не нужно заботиться об этом процессе, и1242 x 2208вызываемый экран设计像素. Мы также используем это в процессе разработки设计像素преобладать.

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

Незамедлительно после,AndroidИспользуются и другие технические решения для достиженияDPRбольше, чем1экран, но принцип тот же. из-заAndroidСуществует много размеров экрана, и диапазон разрешений очень велик, в отличие от Apple, у которой есть только несколько фиксированных устройств и собственных размеров. Поэтому, чтобы обеспечить эффект отображения различных устройств,AndroidУстройство разделено на несколько интервалов в зависимости от плотности пикселей устройства:

Конечно, всеAndroidУстройство не обязательно строго следует вышеуказанным разрешениям, каждому типу может соответствовать несколько разных разрешений, поэтому каждыйAndroidМобильный телефон может определить свой собственный в соответствии с заданным диапазоном.DPR, чтобы иметь аналогичный дисплей. Конечно, это только похоже.Из-за различий в размере и разрешении каждого устройства независимые пиксели устройств не будут полностью равными, поэтому различныеAndroidУстройства по-прежнему не совсем равны в представлении.

3.2 Разработка мобильного терминала

существуетiOS,Androidа такжеReact NativeВ процессе разработки единицы стиля фактически используют аппаратно-независимые пиксели.

iOSЕдиницей размера являетсяpt,AndroidЕдиницей размера являетсяdp,React NativeВ , не указана явная единица измерения, на самом деле это независимые от устройства пиксели.dp.

В использованииReact NativeразвиватьAppчас,UIПредоставленные нам схемы прототипов обычно основаны наiphone6заданных пикселей.

Чтобы адаптироваться ко всем моделям, нам нужно преобразовать физические пиксели в независимые от устройства пиксели при написании стилей: например: если высота данного элемента равна200px(здесьpxОтносится к физическим пикселям, а неCSSпикселей),iphone6Соотношение пикселей устройства2, мы даемheightДолжно быть200px/2=100dp.

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

Мы также можем использовать код (React Native) вpxа такжеdpпреобразование:

import {PixelRatio } from 'react-native';

const dpr = PixelRatio.get();

/**
 * px转换为dp
 */
export function pxConvertTodp(px) {
  return px / dpr;
}

/**
 * dp转换为px
 */
export function dpConvertTopx(dp) {
  return PixelRatio.getPixelSizeForLayoutSize(dp);
}

3.3 Разработка веб-терминала

пишуCSS, единицей, которую мы используем чаще всего, являетсяpx,Прямо сейчасCSS像素, когда коэффициент масштабирования страницы100%когдаCSS像素Равен одному независимому от устройства пикселю.

ноCSS像素легко меняется, когда пользователь увеличивает масштаб браузера,CSS像素будет увеличиваться, когдаCSS像素охватит больше физических пикселей.

页面的缩放系数 = CSS像素 / 设备独立像素.

3.4 Об экране

Еще два слова здесьRetinaскрин, как я видел во многих статьях правильныйRetinaНепонимание экрана.

RetinaЭкран — это просто маркетинговый термин, который придумала Apple:

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

почему стресс普通的使用距离下Шерстяная ткань? Давайте посмотрим на формулу его расчета:

? a=2arctan(h/2d) ?

aпредставляет перспективу человеческого глаза,h представляет расстояние между пикселями,dПредставляет собой расстояние между невооруженным глазом и экраном. Экран, отвечающий вышеуказанным условиям, может сделать один физический пиксель невидимым для невооруженного глаза.

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

Наличие нескольких физических пикселей, отображающих один пиксель, простоRetinaТехника, используемая экраном для достижения эффекта. вместо всехDPR > 1экранRetinaЭкран.

Например: дать вам экран большого размера, даже если егоPPIочень высоко,DPRОн также очень высокий, и его пиксели хорошо видны с близкого расстояния.RetinaЭкран.

мы часто видимKа такжеPЭтот блок для описания экрана:

PОн представляет собой количество пикселей в вертикальном направлении экрана.1080Pто есть вертикальный1080пикселей с разрешением1920X1080экран принадлежит1080PЭкран.

То, что мы обычно называем экраном высокой четкости, на самом деле означает, что физическое разрешение экрана достигает или превышает1920X1080экран.

KОт имени экрана по горизонтали есть несколько1024пикселей, как правило, горизонтальные пиксели превышают2048принадлежать2Kэкрана, горизонтальные пиксели превышают4096принадлежать4KЭкран.

4. Окно просмотра

Область просмотра(viewport) представляет видимую в данный момент область компьютерной графики. существуетWebВ терминологии браузера обычно то же самое, что и окно браузера, но за исключением окна браузера.UI, строка меню и т. д. — та часть документа, которую вы просматриваете.

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

4.1 Окно просмотра макета

видовой экран макета (layout viewport): когда мы указываем размер элемента в процентах, его расчетное значение вычисляется из содержащего блока элемента. Когда элемент является самым верхним элементом, он рассчитывается на основе окна просмотра макета.

Таким образом, окно просмотра макета является базовым окном для макета веб-страницы.PCВ браузере область просмотра макета равна размеру окна текущего браузера (исключаяborders,margins,полоса прокрутки).

На мобильных устройствах видовому экрану макета присваивается значение по умолчанию, в основном980px, что гарантируетPCВеб-страницу можно отобразить в мобильном браузере, но она очень маленькая, и пользователь может вручную увеличить веб-страницу.

Мы можем позвонитьdocument.documentElement.clientWidth / clientHeightчтобы получить размер области просмотра макета.

4.2 Визуальное окно просмотра

визуальное окно (visual viewport): область, которую пользователь фактически видит через экран.

Визуальное окно просмотра по умолчанию соответствует размеру окна текущего браузера (включая ширину полосы прокрутки).

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

Например: пользователь увеличивает окно браузера200%, то в окне браузераCSS像素будет увеличиваться по мере увеличения визуального окна просмотра, когдаCSSПиксели охватывают больше физических пикселей.

Таким образом, окно просмотра макета будет ограничивать вашиCSSМакет и визуальное окно просмотра точно определяют, что видит пользователь.

Мы можем позвонитьwindow.innerWidth / innerHeightчтобы получить размер визуального окна просмотра.

4.3 Идеальное окно просмотра

Эффект окна просмотра макета, отображаемого на мобильном терминале, не является идеальным эффектом, поэтому идеальное окно просмотра (ideal viewport): идеальный размер страниц веб-сайта для отображения на мобильных устройствах.

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

Представлено вышеCSS像素时когда-либо упоминалось页面的缩放系数 = CSS像素 / 设备独立像素, на самом деле говоря页面的缩放系数 = 理想视口宽度 / 视觉视口宽度более точным.

Таким образом, когда коэффициент масштабирования страницы100%час,CSS像素 = 设备独立像素,理想视口 = 视觉视口.

Мы можем позвонитьscreen.width / heightчтобы получить идеальный размер области просмотра.

4.4 Meta viewport

<meta>Элементы представляют те, которые не могут быть представлены другимиHTMLЛюбая информация метаданных, представленная одним из элементов, связанных с метаданными, которые сообщают браузеру, как анализировать страницу.

мы можем использовать<meta>элементальviewportЧтобы помочь нам настроить область просмотра, масштабирование и т. д., чтобы мобильный терминал мог получить лучший эффект отображения.

<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1; minimum-scale=1; user-scalable=no;">

вышеviewportКонфигурация , давайте посмотрим на их конкретное значение:

Value возможное значение описывать
width положительное целое число илиdevice-width кpixels(в пикселях), определяет ширину области просмотра макета.
height положительное целое число илиdevice-height кpixels(в пикселях), определяет высоту области просмотра макета.
initial-scale 0.0 - 10.0 Определяет исходный коэффициент масштабирования страницы.
minimum-scale 0.0 - 10.0 Определяет минимальное значение для масштабирования; должно быть меньше или равноmaximum-scaleценность .
maximum-scale 0.0 - 10.0 Определяет максимальное значение для масштабирования; должно быть больше или равноminimum-scaleценность .
user-scalable логическое значение (yesилиno) Если установленоno, пользователь не сможет увеличивать или уменьшать масштаб страницы. По умолчанию да.

4.5 Адаптация мобильного терминала

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

device-widthравна ширине идеального окна просмотра, поэтому установитеwidth=device-widthЭто эквивалентно созданию окна просмотра макета, равного идеальному экрану просмотра.

из-заinitial-scale = 理想视口宽度 / 视觉视口宽度, поэтому мы устанавливаемinitial-scale=1;Это эквивалентно созданию визуального окна просмотра, равного идеальному.

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

4.6 Масштабирование

упомянутый вышеwidthМожно определить ширину окна просмотра макета, на самом деле это не единственный определяющий фактор окна просмотра макета, установитеinitial-scaleЭто также может повлиять на окно просмотра макета, поскольку ширина окна просмотра макета принимается заwidthи максимальная ширина визуального окна просмотра.

Например: если идеальная ширина области просмотра мобильного телефона400px,настраиватьwidth=device-width,initial-scale=2,В настоящее время视觉视口宽度 = 理想视口宽度 / initial-scaleкоторый200px, окно просмотра макета принимает максимальное значение из двух, а именноdevice-width 400px.

Если установленоwidth=device-width,initial-scale=0.5,В настоящее время视觉视口宽度 = 理想视口宽度 / initial-scaleкоторый800px, окно просмотра макета принимает максимальное значение из двух, а именно800px.

4.7 Получить размер браузера

Браузер предоставляет нам размер окнаAPIИх много, давайте сравним их:

  • window.innerHeight: получить высоту визуального окна просмотра браузера (включая вертикальные полосы прокрутки).
  • window.outerHeight: получить высоту за пределами окна браузера. Представляет высоту всего окна браузера, включая боковые панели, оконный хром и границы изменения размера окна.
  • window.screen.Height: Получите экран, чтобы получить идеальную высоту области просмотра, это значение фиксировано,设备的分辨率/设备像素比
  • window.screen.availHeight: Доступная высота окна браузера.
  • document.documentElement.clientHeight: получить высоту области просмотра макета браузера, включая отступы, но исключая вертикальные полосы прокрутки, границы и поля.
  • document.documentElement.offsetHeight: включает отступы, полосы прокрутки, границы и поля.
  • document.documentElement.scrollHeight: минимальная ширина, необходимая для размещения всего в окне просмотра без использования полос прокрутки. измерения иclientHeightТо же самое: он включает заполнение элемента, но не границы, поля или вертикальные полосы прокрутки.

Пять, 1px проблема

Чтобы адаптироваться к различным экранам, мы обычно используем аппаратно-независимые пиксели для разметки страниц при написании кода.

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

5.1 border-image

на основеmediaЗапрос для определения различных соотношений пикселей устройства с учетом разныхborder-image:

       .border_1px{
          border-bottom: 1px solid #000;
        }
        @media only screen and (-webkit-min-device-pixel-ratio:2){
            .border_1px{
                border-bottom: none;
                border-width: 0 0 1px 0;
                border-image: url(../img/1pxline.png) 0 0 2 0 stretch;
            }
        }

5.2 background-image

а такжеborder-imageТочно так же подготовьте квалифицированное фоновое изображение границы и смоделируйте его на фоне.

       .border_1px{
          border-bottom: 1px solid #000;
        }
        @media only screen and (-webkit-min-device-pixel-ratio:2){
            .border_1px{
                background: url(../img/1pxline.png) repeat-x left bottom;
                background-size: 100% 1px;
            }
        }

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

5.3 Псевдокласс + преобразование

на основеmediaЗапрос для определения соотношения пикселей разных устройств для масштабирования линии:

       .border_1px:before{
          content: '';
          position: absolute;
          top: 0;
          height: 1px;
          width: 100%;
          background-color: #000;
          transform-origin: 50% 0%;
        }
        @media only screen and (-webkit-min-device-pixel-ratio:2){
            .border_1px:before{
                transform: scaleY(0.5);
            }
        }
        @media only screen and (-webkit-min-device-pixel-ratio:3){
            .border_1px:before{
                transform: scaleY(0.33);
            }
        }

Этот метод может встречаться в различных сценариях, если вам нужно соблюсти закругленные углы, вам нужно только добавить псевдоклассы.border-radiusВот и все.

5.4 svg

над намиborder-imageа такжеbackground-imageможно смоделировать1pxГраницы, но все они используют растровые изображения и должны импортироваться извне.

с помощьюPostCSSизpostcss-write-svgмы можем напрямую использоватьborder-imageа такжеbackground-imageСоздайтеsvgиз1pxРамка:

@svg border_1px { 
  height: 2px; 
  @rect { 
    fill: var(--color, black); 
    width: 100%; 
    height: 50%; 
    } 
  } 
.example { border: 1px solid transparent; border-image: svg(border_1px param(--color #00b1ff)) 2 2 stretch; }

После компиляции:

.example { border: 1px solid transparent; border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='2px'%3E%3Crect fill='%2300b1ff' width='100%25' height='50%25'/%3E%3C/svg%3E") 2 2 stretch; }

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

5.5 Настройка области просмотра

Установив масштаб, пустьCSSПиксели равны настоящим физическим пикселям.

Например: когда соотношение пикселей устройства3, масштабируем страницу1/3раз, на этот раз1pxРавен одному реальному пикселю экрана.

    const scale = 1 / window.devicePixelRatio;
    const viewport = document.querySelector('meta[name="viewport"]');
    if (!viewport) {
        viewport = document.createElement('meta');
        viewport.setAttribute('name', 'viewport');
        window.document.head.appendChild(viewport);
    }
    viewport.setAttribute('content', 'width=device-width,user-scalable=no,initial-scale=' + scale + ',maximum-scale=' + scale + ',minimum-scale=' + scale);

На самом деле вышеприведенная схема является более раннейflexibleсхема принята.

Конечно, за это приходится платить, а это означает, что весь макет на вашей странице написан в физических пикселях. Это явно нереально, в настоящее время мы можем использоватьflexibleилиvw、vhчтобы помочь нам адаптироваться.

6. Схема адаптации мобильного терминала

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

6.1 гибкое решение

flexibleРешение представляет собой решение для адаптации мобильных терминалов, исходный код которого был открыт Alibaba в первые дни.flexibleПосле этого используем единообразно на страницеremк макету.

Его основной код очень прост:

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

remотносительноhtmlузлаfont-sizeсделать расчет.

Мы устанавливаемdocument.documentElement.style.fontSizeОн может унифицировать стандарт макета всей страницы.

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

В этот момент нам нужно толькоUIВыходной график преобразуется вremВот и все.

кiPhone6Пример: Окно просмотра компоновки375px,но1rem = 37.5px, тогдаUIШирина данного элемента75px(независимые от устройства пиксели), нам просто нужно установить его на75 / 37.5 = 2rem.

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

Следующий код может гарантировать, что при изменении размера страницы макет может быть адаптивным при срабатыванииwindowизresizeа такжеpageShowАвтоматическая корректировка после событияhtmlизfontSizeразмер.

  // reset rem unit on page resize
window.addEventListener('resize', setRemUnit)window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      setRemUnit()
    }
})

из-заviewportУстройство совместимо со многими браузерами, и вышеуказанное решение теперь официально устарело:

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

Давайте посмотрим на самые популярные сейчасvh、vwстроить планы.

6.2 vh, схема vw

vh、vwСхема о визуальной ширине вьюпортаwindow.innerWidth и визуальная высота области просмотраwindow.innerHeightДелим на 100 равных частей.

надflexibleСхема имитирует эту схему, т.к. ранееvwПока не совсем совместим.

  • vw(Viewport's width):1vwравно визуальному вьюпорту1%
  • vh(Viewport's height) : 1vhвысота визуального окна просмотра1%
  • vmin : vwа такжеvhменьшее значение в
  • vmax: Выбратьvwа такжеvhбольший из

Если визуальное окно просмотра375px,Так1vw = 3.75px, тогдаUIШирина данного элемента75px(независимые от устройства пиксели), нам просто нужно установить его на75 / 3.75 = 20vw.

Нам не нужно преобразовывать пропорциональные отношения здесь, мы можем использоватьPostCSSизpostcss-px-to-viewportПлагины помогают нам в этом процессе. При написании кода нам нужно толькоUIНапишите чертежи конструкцииpxБлок.

Конечно, ни одно решение не идеально.vwЕсть и определенные недостатки:

  • pxПеревести вvwНе обязательно полностью делимые, поэтому есть определенная разница в пикселях.
  • например, когда контейнер используетсяvw,marginиспользоватьpx, легко привести к тому, что общая ширина превысит100vw, что влияет на эффект макета. Конечно, мы также можем избежать этого, например, используяpaddingзаменятьmargin, в сочетании сcalc()использование функций и т. д.

7. Адаптируйтесь к iPhoneX

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

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

существуетiPhoneXПосле релиза многие производители выпустили телефоны с боковыми экранами.

Эти мобильные телефоны и обычные мобильные телефоны внесли не более трех изменений во внешний вид: скругленные углы (corners), челка (sensor housing) и маленькие черные полосы (Home Indicator). Чтобы адаптироваться к этим мобильным телефонам, родилась концепция безопасной зоны: безопасная зона — это видимая область окна, на которую не влияют три вышеуказанных эффекта.

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

7.2 viewport-fit

viewport-fitразработан, чтобы соответствоватьiPhoneXРодившееся свойство используется для ограничения отображения веб-страниц в безопасной области.

contain: окно просмотра полностью содержит веб-контент

cover: веб-контент полностью закрывает видимое окно

По умолчанию или установленоautoа такжеcontainТот же эффект.

7.3 env, постоянная

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

Внутри функции может быть четыре константы:

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

Примечание: мы должны указатьviweport-fitЗатем вы можете использовать эти две функции:

<meta name="viewport" content="viewport-fit=cover">

constantсуществуетiOS < 11.2действует в версии ,envсуществуетiOS >= 11.2, что означает, что нам часто приходится устанавливать их одновременно, чтобы ограничить страницу безопасной областью:

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

При использовании нижних фиксированных навигационных панелей нам нужно установить ихpaddingстоимость:

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

Восемь, горизонтальная экранизация

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

8.1 Горизонтальный экран обнаружения JavaScript

window.orientation: получить направление вращения экрана

window.addEventListener("resize", ()=>{
    if (window.orientation === 180 || window.orientation === 0) { 
      // 正常方向或屏幕旋转180度
        console.log('竖屏');
    };
    if (window.orientation === 90 || window.orientation === -90 ){ 
       // 屏幕顺时钟旋转90度或屏幕逆时针旋转90度
        console.log('横屏');
    }  
});

8.2 Горизонтальный экран обнаружения CSS

@media screen and (orientation: portrait) {
  /*竖屏...*/
} 
@media screen and (orientation: landscape) {
  /*横屏...*/
}

Девять, проблема с размытием изображения

9.1 Причины

Большинство изображений, которые мы обычно используем, являются растровыми изображениями (png、jpg...), растровое изображение состоит из пикселей, каждый пиксель имеет определенное положение и значение цвета:

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

пока вdpr > 1На экране растрового изображения пиксель растрового изображения может быть представлен несколькими физическими пикселями, однако этим физическим пикселям нельзя точно присвоить цвет соответствующего пикселя растрового изображения, и их можно только аппроксимировать, поэтому одно и то же изображение вdpr > 1будет размыто на экране:

9.2 Решения

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

например: вdpr=2дважды отображает изображение на экране(@2x),существуетdpr=3на экране(@3x).

9.3 медиа-запрос

использоватьmediaЗапрос и оцените различные соотношения пикселей устройства для отображения изображений с различными принципами:

       .avatar{
            background-image: url(conardLi_1x.png);
        }
        @media only screen and (-webkit-min-device-pixel-ratio:2){
            .avatar{
                background-image: url(conardLi_2x.png);
            }
        }
        @media only screen and (-webkit-min-device-pixel-ratio:3){
            .avatar{
                background-image: url(conardLi_3x.png);
            }
        }

Только для фоновых изображений

9.4 image-set

использоватьimage-set:

.avatar {
    background-image: -webkit-image-set( "conardLi_1x.png" 1x, "conardLi_2x.png" 2x );
}

Только для фоновых изображений

9.5 srcset

использоватьimgпомеченsrcsetсвойство, браузер автоматически подберет лучшее отображаемое изображение на основе плотности пикселей:

<img src="conardLi_1x.png"
     srcset=" conardLi_2x.png 2x, conardLi_3x.png 3x">

9.6 JavaScript-сращивание URL-адреса изображения

использоватьwindow.devicePixelRatioПолучите соотношение пикселей устройства, просмотрите все изображения и замените адрес изображения:

const dpr = window.devicePixelRatio;
const images =  document.querySelectorAll('img');
images.forEach((img)=>{
  img.src.replace(".", `@${dpr}x.`);
})

9.7 Использование SVG

SVG Полное название масштабируемой векторной графики (Scalable Vector Graphics). В отличие от растровых изображений, основанных на пикселях,SVGОн относится к описанию формы изображения, поэтому по сути является текстовым файлом небольшого размера и не будет искажаться, сколько бы раз его не увеличивали.

За исключением того, что мы вручную рисуем кодsvg, мы также можем использовать то же самое, что и растровое изображениеsvgкартина:

<img src="conardLi.svg">

<img src="data:image/svg+xml;base64,[data]">

.avatar {
  background: url(conardLi.svg);
}

Ссылаться на

резюме

Я надеюсь, что вы сможете достичь следующих результатов после прочтения этой статьи:

  • Уточнение общих концепций адаптации мобильных терминалов
  • Понять принцип проблемы адаптации мобильного терминала и освоить хотя бы одно решение

Если в статье есть ошибки, исправьте их в комментариях, если статья вам поможет, ставьте лайк и подписывайтесь.

Если вы хотите читать больше качественных статей, вы можете подписаться на меняблог на гитхабе, твоя звезда✨, лайки и внимание - движущая сила моего постоянного творчества!

Рекомендую обратить внимание на мой паблик WeChat [code secret garden], каждый день выкладывать качественные статьи, будем общаться и расти вместе.

Мы являемся научно-исследовательской командой ByteDance Interactive Entertainment, включая Douyin Short Video, Douyin Volcano, TikTok, Faceu, Qingyan, Jianying и т. д. По состоянию на январь 2020 года Douyin Daily Active (DAU) превысил 400 миллионов человек и продолжает поддерживать быстрый рост. . Вы будете поддерживать разработку продуктов и связанные с ними архитектурные работы, где каждая строка кода может повлиять на сотни миллионов пользователей.

Код набора в школу 2021:DRZUM5Z

Официальный сайт доставки:job.toutiao.com/s/JR8SthH

Категории