Хватит спрашивать меня о мобильной адаптации

реактивное программирование
Серия "Больше не задавай мне ХХ вопросов":
один,Не задавайте мне больше вопросов, на которые указывает это
два,Перестаньте задавать мне междоменные вопросы

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

запутанные отношения

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

пиксель

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

  • пиксель устройства

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

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

Аппаратно-независимый пиксель — это виртуальный пиксель, которым может управлять программа и который соответствует пикселю CSS в веб-разработке.

  • DPR

Отношение между пикселями устройства и независимыми от устройства пикселями представляет собой DPR (соотношение пикселей устройства),соотношение пикселей устройства = пиксели устройства / независимые от устройства пиксели. Предпосылка этой формулы заключается в том, что коэффициент масштабирования равен 1, и причина будет известна, когда мы будем говорить о масштабировании ниже. В соответствии с этим соотношением, если пиксель устройства больше, чем пиксель, независимый от устройства (устройство с DPR больше 1, мы часто говорим, что экран высокой четкости или экран Retina), будет ситуация, когда один независимый от устройства пиксель соответствует нескольким устройствам. пикселей:
图片描述

Область просмотра

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

  • видовой экран макета

Область просмотра макета представляет собой контейнер поверх элемента html, и наша страница «установлена» в области просмотра макета.
Подумайте о ширине: 100% мы часто пишем, на основании чего эти 100% рассчитываются? Перейдите к данным, и вы увидите:Если какому-то атрибуту присваивается процентное значение, его вычисляемое значение вычисляется из блока, содержащего элемент.Каков содержащий блок элемента html? Верно, наше окно просмотра макета. Это корень всех процентных вычислений CSS. Если CSS — это кисть, то окно просмотра макета — это холст. Этот холст имеет размер по умолчанию (если метапросмотр не задан вручную), обычно 768px. ~ 1024px, можно пройтиdocument.documentElement.clientWidthПолучать. Таким образом, макет веб-страницы больше не ограничен размером устройства, и даже мобильное устройство с небольшим экраном может вместить веб-сайт ПК.
布局视口

  • визуальное окно просмотра

Визуальное окно просмотра относится к области, которую пользователь видит через экран устройства. Размер визуального окна просмотра можно изменить путем масштабирования иwindow.innerWidthПолучать.
Здесь необходимо поговорить о масштабировании, масштабирование меняет размер пикселей CSS, при увеличении масштаба пиксели CSS увеличиваются, а пиксель CSS может охватывать большее количество пикселей устройства, и визуальное окно просмотра становится меньше. Какой? Увеличить масштаб, но область визуального просмотра становится меньше? Да, это потому, что визуальное окно просмотра также измеряется пикселями CSS, а увеличение должно увеличивать пиксели CSS. Предположим, что изначально экрану требовалось 200 пикселей CSS для заполнения экрана. Из-за масштабирования теперь требуется только 100 пикселей CSS. чтобы занимать полностью, поэтому ширина визуального окна просмотра становится равной 100px.
Хотя масштабирование изменяет размер пикселей CSS, масштабирование на мобильной стороне не меняет область просмотра макета, поэтому масштабирование не влияет на макет, но влияет на ПК. Самое интуитивное ощущение, что мы обычно зажимаем и масштабируем веб-страницу на мобильной стороне, и макет всей веб-страницы не меняется.Вы можете видеть вещи в разных областях, перетаскивая, но масштабируя на стороне ПК, например , при чтении хочется, чтобы текст был крупнее.Некоторые страницы увеличены, и слова в это время увеличены, но макет всей страницы будет изменен. Итак, поскольку это не имеет ничего общего с окном просмотра макета, кому оно нужно? Ответ — идеальный вьюпорт, о котором мы поговорим ниже, и расчет между ними:коэффициент масштабирования = идеальная ширина окна просмотра / ширина визуального окна просмотра
视觉视口

  • идеальное окно просмотра

Идеальная область просмотра относится к идеальному размеру веб-сайта на мобильном устройстве, то есть к размеру экрана устройства.
Зачем нужен идеальный вьюпорт? Прежде всего, давайте посмотрим, насколько текущая ситуация не идеальна. Когда мы просматриваем веб-сайт без мобильной адаптации, поскольку область просмотра макета составляет от 768 до 1024 пикселей, весь веб-сайт «рисуется» на таком большом «холсте», но поскольку экран мобильного телефона меньше, чем «холст». Следовательно, его необходимо уменьшить, прежде чем его можно будет вставить на экран мобильного телефона.В результате, хотя мы можем видеть всю картинку при просмотре веб-сайта, вещи внутри становятся очень маленькими, и нам нужно увеличить масштаб, чтобы видеть это ясно, что не идеально. Было бы идеально, если бы вы могли ясно видеть без увеличения. Вспоминая вышеупомянутое неидеальное решение, оно состоит в том, чтобы уменьшить большой холст и подогнать его под маленький экран.Предполагая, что холст сейчас такой же большой, как экран, разве не уместно рисовать на этом холсте?
Подводя итог, можно сказать, что идеальное окно просмотра — это просто идеальное окно просмотра макета.<meta name="viewport" content="width=device-width, initial-scale=1">устанавливать.

соединить их вместе

关联

Познакомьтесь с мета-окном просмотра

Элемент предоставляет метаинформацию о странице, которая не отображается на странице и может использоваться, чтобы указать браузеру, как анализировать страницу. В можно настроить много чего, но здесь мы говорим только о vieport, который является основой всех решений мобильной адаптации.
Во-первых, формат настройки мета-окна просмотра<meta name="viewport" content="name=value,name=value", где значение name может быть установлено в:

  1. ширина: установите фиксированное значение области просмотра макета, например 375 пикселей или ширину устройства (ширина устройства).
  2. Initial-scale: устанавливает начальный масштаб страницы.
  3. минимальный масштаб: установите минимальный уровень масштабирования.
  4. максимальный масштаб: установить максимальное увеличение
  5. масштабируемый пользователем: отключить масштабирование, если установлено значение «нет».

Хотя значений всего пять, стоит отметить несколько моментов:

Эффекты установки начального масштаба

В соответствии с формулойкоэффициент масштабирования = идеальная ширина окна просмотра / ширина визуального окна просмотра, если начальный масштаб установлен в 0.5, то возьмем для примера iPhone6, ширина устройства iPhone6 ​​375px, то есть идеальная ширина вьюпорта тоже 375px, поэтому ширина визуального вьюпорта = 375px (идеальная ширина области просмотра) / 0,5 (коэффициент масштабирования). Очевидно, что установка начального масштаба эквивалентна инициализации визуального окна просмотра, и этоИнициализируйте видовой экран макета значением этого визуального видового экрана..

ширина и начальный масштаб сосуществуют

Как упоминалось выше, установка начального масштаба эквивалентна инициализации визуального окна просмотра и окна просмотра макета, но ширина используется для указания размера окна просмотра макета, так что кто будет слушать настройки вместе?
Или возьмем для примера iPhone6, его размер 667(h)*375(w), если установить<meta name="viewport" content="width=400, initial-scale=1">, выполнятьconsole.log(`布局视口: ${document.documentElement.clientWidth}; 视觉视口: ${window.innerWidth}`)получит "Просмотр макета: 400; визуальное окно просмотра: 400".
В это время поверните устройство, и размер станет 667 (ш) * 375 (в), а затем снова выполните его.console.log(`布局视口: ${document.documentElement.clientWidth}; 视觉视口: ${window.innerWidth}`)Вы получаете «Вьюпорт макета: 667; Визуальный вьюпорт: 667».
Вывод таков: и ширина, и начальный масштаб будут инициализировать вьюпорт макета, но браузер примет его максимальное значение.

Установите идеальное окно просмотра

Оглянись в это время<meta name="viewport" content="width=device-width, initial-scale=1">, очевидно, width=device-width и initial-scale=1 оба предназначены для инициализации видового экрана макета в идеальный видовой экран макета. Недостаточно написать только один из них. Зачем писать оба вместе? Поскольку некоторые браузеры устанавливают только один из них, нет гарантии, что размер идеального окна просмотра можно будет правильно изменить при повороте экрана, поэтому они написаны вместе только для решения проблемы совместимости.

Удобное восстановление чертежей мобильного дизайна

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

классическая проблема

  • картина

Проблема с изображением здесь означает, что изображения под экраном HD/Retina будут размытыми.Это потому, что большинство изображений, которые мы обычно используем, представляют собой изображения в таких форматах, как png и jpg.Они называются растровыми изображениями (bitmap), которые составлены Он состоит из пикселей, и масштабирование будет искажено. Говоря о пикселях выше, я сказал, что этот тип экрана высокого разрешения/Retina DPR больше единицы, тогда один пиксель охватывает несколько пикселей устройства, а растровым изображениям требуется, чтобы один пиксель соответствовал одному пикселю устройства, чтобы быть четким. Итак, предположим, что изображение 100 x 100 четкое на обычном экране, но оно будет выглядеть размытым на экране высокой четкости/Retina, потому что исходное изображение 100 x 100 на обычном экране совпадает с пикселем устройства. -однозначное соответствие, но пиксель изображения на экране высокой четкости/Retina должен соответствовать нескольким пикселям устройства, чтобы изображение выглядело размытым.
图片问题
Как показано на рисунке, если пиксель изображения должен соответствовать нескольким пикселям устройства, эти пиксели устройства могут отображаться только тем же цветом, что и пиксель изображения, что приводит к размытому виду.
Теперь, когда вы знаете причину проблемы, решение также очень простое.Растровое изображение нуждается в том, чтобы один пиксель соответствовал одному пикселю устройства, чтобы быть четким, поэтому изначально было 100. Картинка х 100 отображается четко на экране с ДПР 1, а на экране ДПР 2 она размыта, затем на экран ДПР 2 ставим картинку 200 х 200, так что один к одному одна переписка.

  • граница 1px

1px边框
«Посмотрите на чертеж. Линия очень тонкая. Почему вы понимаете, что она такая толстая и выглядит хуже?»
Нет смысла.Изображение в дизайне 1px,и CSS тоже 1px.Как он может быть толстым? Как правило, когда дизайнер рисует рисунок, он рисует рисунок в соответствии с размером в качестве стандарта. Например, при рисовании рисунка в соответствии с размером iPhone 6 это дизайнерский рисунок шириной 750 пикселей. 750 пикселей на самом деле является пикселем устройства iPhone 6. При измерении чертежа дизайна количество Результирующий 1 пиксель на самом деле является 1 пикселем устройства, и когда мы устанавливаем<meta name="viewport" content="width=device-width, initial-scale=1">Когда вьюпорт макета равен идеальному вьюпорту равному 375px, а поскольку DPR iPhone6 ​​равен 2, 1px при написании CSS соответствует 2 пикселям устройства, поэтому он выглядит толще.
Итак, пока вы пишете 0,5px, это соответствует 1 пикселю устройства. Да, причина в этом, но многие браузеры не поддерживают способ написания 0,5px, поэтому он не может отображаться, но это не беда, в интернете есть много способов решить эту проблему.

Восстановление чертежей

Поскольку экран ПК обычно больше, чем размер чертежа, вам нужно только зафиксировать область содержимого в центре, чтобы отобразить содержимое чертежа, а остальные области оставить пустыми. С другой стороны, экран мобильного терминала может быть большим или маленьким, а дизайнерские чертежи обычно рисуются на основе одной модели, например, размера iPhone 6. Если дизайнерские чертежи не обрабатываются напрямую, какие проблемы возникнут? происходить?
对比
(Слева направо: iPhone4, iPhone6, iPhone плюс)
Вы можете видеть, что элемент 350px x 350px измерен в чертеже проекта на основе iPhone6 ​​и написан на iPhone6.width: 350px;height: 350px;Это правильно, левый и правый зазоры составляют 10 пикселей, но на меньшем экране iPhone4 есть горизонтальные полосы прокрутки, а плюс левый и правый зазоры, очевидно, намного больше, чем 10 пикселей, поэтому эффект от экранов разных размеров такой же, как и на чертеже дизайна. ... Будут разные степени несоответствия, а это не то, чего мы хотим. Мы хотим, чтобы эффект отображения на экранах разных размеров соответствовал пропорциям чертежей дизайна.
Поскольку вы хотите, чтобы соотношение отображения разных размеров экрана соответствовало чертежу проекта, то, очевидно, схема адаптацииПропорциональное масштабирование.
(Следующий код предназначен для объяснения принципа без слишком подробного рассмотрения и тестирования и не может использоваться в производственной среде)

  • схема окна просмотра

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

<script>
    const scale = window.screen.width / 750
    document.write(`<meta name="viewport" content="initial-scale=${scale}">`)
</script>

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

  • рем схема

В отличие от px, который является единицей фиксированного размера, rem является относительной единицей, относящейся к единице размера шрифта тега html. Например, размер шрифта html-тега равен 100px, тогда 1rem равен 100px. С помощью относительной единицы бэр мы также можем добиться эффекта пропорционального масштабирования.

  • Это решение не требует масштабирования вьюпорта, поэтому сначала по соглашению мы делаем вьюпорт макета равным идеальному вьюпорту:<meta name="viewport" content="width=device-width, initial-scale=1">
  • Это все еще чертеж дизайна, основанный на пикселях устройства iPhone 6, а ширина составляет 750 пикселей Предположим, что размер шрифта тега html, основанный на чертеже дизайна, составляет 100 пикселей, поэтому1rem = 100px, то общая ширина этой конструкции равна7.5rem
  • Принимая чертеж проекта с общей шириной 7,5 бэр в качестве стандарта, общая ширина различных размеров экрана также должна быть 7,5 бэр.Поскольку область просмотра макета установлена ​​​​равной идеальной области просмотра, взяв в качестве примера iPhone6, вьюпорт макета iPhone6 ​​равен идеальному вьюпорту.Если вьюпорт макета 375px (то есть общая ширина 7.5rem), то теперь нам нужно только решить, какой размер шрифта html нужно задать когда область просмотра макета составляет 375 пикселей. Очень просто, размер шрифта html * 7,5 = 375, тогда размер шрифта равен 50px.
  • Развернуть на другие экраныdocument.documentElement.style.fontSize = `${document.documentElement.clientWidth / 7.5}px`
  • Теперь нам нужно только измерить карту дизайна, например, карта дизайна имеет элемент 300px, тогда мы пишем 3rem, когда пишем css (потому что он начинается с1rem = 100pxКак референс, так тут 300px/100 можно)

Используя этот сценарий, мы используем REM только для использования RE, который будет использоваться для ожидания элементов, которые необходимо масштабировать, а фиксированный размер требуется для использования PX. Тем не менее, это решение может быть не таким интуитивно понятным при написании CSS, стоимость может быть немного, но с помощью инструмента сборки или Less/Sass можно решить, в конце концов, должно быть очень мало элементов, которые не используют эти инструменты.

  • Расширенная программа rem

Упомянутая здесь расширенная версия решения rem на самом деле приобретается вручную.Гибкий план(тоже похожеМобильный терминал высокой четкости, многоэкранное решение для адаптации), что именно укрепляет? То есть, настроив область просмотра для решения проблемы с границей в 1 пиксель в глобальном масштабе.
Поскольку проблема с границей в 1px должна быть решена путем установки области просмотра, должно быть что-то, что мешает установить эту область просмотра:

if (!dpr && !scale) {
    var isAndroid = win.navigator.appVersion.match(/android/gi);
    var isIPhone = win.navigator.appVersion.match(/iphone/gi);
    var devicePixelRatio = win.devicePixelRatio;
    if (isIPhone) {
        if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {                
            dpr = 3;
        } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
            dpr = 2;
        } else {
            dpr = 1;
        }
    } else {
        // 其他设备下，仍旧使用1倍的方案
        dpr = 1;
    }
    scale = 1 / dpr;
}

Полученный масштаб используется для установки масштаба области просмотра.document.write(`<meta name="viewport" content="initial-scale=${scale}">`), так что окончательный эффект масштабирования окна просмотра до 1/dpr для экранов Retina будет следующим:1px пиксель CSS строго равен 1px пикселю устройства, который решает проблему с границей в 1 пиксель. Так почему только масштабирование на iPhone? Пожалуйста, прочитайте статью г-на Да МоПоговорим о решении 1px под Retina.
Другие конфигурации, связанные с rem, аналогичны приведенной выше схеме rem и здесь обсуждаться не будут.
Самым большим преимуществом этой расширенной схемы rem является то, что она решает проблему границы в 1 пиксель, но также масштабирует область просмотра и по-прежнему сталкивается с некоторыми эффектами схемы области просмотра, упомянутой выше.По этой причине схема будет устанавливать данные для html. -дпр

document.documentElement.setAttribute('data-dpr', dpr)

Итак, при написании css вы можете установить фиксированный размер для разных dpr:

.test {
    width: 1rem; 
    height: 2rem;
    font-size: 12px; 
}
[data-dpr="2"] .test {
    font-size: 13px;
}
[data-dpr="3"] .test {
    font-size: 14px;
}
  • фольксваген схема

vw также является относительной единицей, она относится к области просмотра макета, 1vw составляет 1% от ширины области просмотра макета. По сути, схема rem имитирует vw, давайте посмотрим, как использовать vw.

  1. Это по-прежнему знакомый стандартный дизайн iPhone6 ​​шириной 750 пикселей. Тогда 1vw = 1% ширины вьюпорта, по чертежу проекта это 100vw = 750px, тогда 1vw = 7,5px.
  2. Один элемент карты дизайна имеет размер 100 пикселей, а CSS нужно записать как Xvw * 7,5 = 100, поэтому X равно 13,3vw.
  3. Если вы хотите рассчитать, вы все равно можете передать его инструменту сборки.Подробности см.Поговорим об адаптации мобильных страниц

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

это наконец закончилось

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

Категории