Действительно, мобильное изменение размера не имеет ничего общего с dpr

внешний интерфейс Отзывчивый дизайн

предисловие

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

1. Что такое адаптация размера

Во-первых, когда речь идет об адаптации, она может быть по-разному понята в глазах разных людей, особенно связь с отзывчивостью.Здесь я расскажу о том, что я понимаю об адаптации и ее отличии от отзывчивости. Давайте сначала поговорим об адаптивном дизайне. Адаптивный дизайн означает, что у него хорошая компоновка и производительность контента при разных размерах экрана. Проще говоря, страница может быть адаптирована к множеству экранов разных размеров, и она по-прежнему выглядит хорошо спроектированной. . Для достижения этой цели можно использовать js или css для динамического изменения размера макета, при этом размер элемента будет изменен, макет будет изменен, и элемент даже будет скрыт. Например, страница, отображаемая на стороне ПК, будет перенесена на мобильную сторону. Самоадаптация часто учитывает другой аспект, т. е. есть надежда, что дизайн страницы соответствует соотношению дизайна проекта дизайна. Это также является целью самоадаптации. В этом процессе размер элементов при разной ширине экрана тоже будет меняться, но в целом изменений макета и скрытых элементов не будет, потому что черновик дизайна такой, нам приходится писать страницу по размеру девушки-дизайнера. Итак, согласно тому, что я сказал выше, те адаптации, написанные в соответствии с медиа-запросами CSS, строго не называются адаптациями, потому что между точками останова будут пропорциональные ошибки, и если ошибка меньше, потребуется интерполяция. Очевидно, что использование css media query не является хорошим способом сделать адаптивным, нам нужен точный метод для этого, в это время выходит js, ниже будут перечислены решения Taobao и решения Netease, которые широко распространены.

2. Решение Таобао

Нажмите здесь, чтобы увидеть конкретный код программы Taobaoflexible

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

(function () {
    var dpr = window.devicePixelRatio;
    var meta = document.createElement('meta');
    var scale = 1 / dpr;
    meta.setAttribute('name', 'viewport');
    meta.setAttribute('content', 'width=device-width, user-scalable=no, initial-scale=' + scale +
      ', maximum-scale=' + scale + ', minimum-scale=' + scale);
    document.getElementsByTagName('head')[0].appendChild(meta);
    // 动态设置的缩放大小会影响布局视口的尺寸
      function resize() {
      var deviceWidth  = document.documentElement.clientWidth;
      document.documentElement.style.fontSize = (deviceWidth / 10) +'px';
         }
    resize();
    window.onresize = resize;
  })()

Этот код можно адаптировать в браузере. Его процесс заключается в том, чтобы сначала получить dpr устройства. Так называемый dpr — это соотношение пикселей устройства. Что такое соотношение пикселей устройства? Это размер единицы, физический пиксель устройства устройствоЧисло делится на размер независимого пикселя устройства.Физический пиксель — это светоизлучающая точка на экране мобильного телефона.Размер фиксирован.Независимый пиксель также называется логическим пикселем.Пиксель размер, установленный CSS, является логическим пикселем Для мобильных телефонов с dpr, равным 2. Для экрана установите ширину CSS на 1 пиксель, что фактически покрывает 2 физических пикселя устройства. Возвращаясь к теме, после получения dpr вы можете масштабировать макет, динамически устанавливая значение области просмотра мета. Здесь есть ключ, который должен установить размер ширины = ширины устройства и начального масштаба. Прежде чем описывать роль этих двух, мы должны сначала понять концепцию, которая является окном просмотра макета. Окно просмотра макета имеет псевдоним, называемый начальный содержащий блок.В более ранней литературе начальный содержащий блок также назывался холстом. Понимание холста может быть проще, чем понимание области просмотра макета. Если вы рисуете пропорционально, вы часто будете ссылаться на размер используемого холста. Например, дизайнер рисует квадрат 200 пикселей на 750 пикселей. Если вы хотите нарисовать 100 см квадрат Чтобы рисовать на бумаге, возможно, вам придется рассчитать ширину квадрата так: 100см * 200/750, вы можете видеть, что в этом расчете не используется dpr, сколько молекул бумаги и сколько атомов пересекают ваши штрихи. влияют на меня во всем масштабе рисунка. Процесс нашего рисования аналогичен процессу настройки CSS, размер CSS зависит от размера вьюпорта макета, а размер вьюпорта макета веб-страницы можно получить в стандартном режиме.

document.documentElement.clientWidth,

Два ключевых элемента устанавливаются width=device-width, initial-scale=scale, они сначала увеличивают окно просмотра макета в dpr раз, а затем масштабируют общий множитель, чтобы он соответствовал размеру устройства. Это также легко проверить, распечатав в консоли размер области просмотра макета.

图片
Это соответствует спецификации дизайна 640px, а размер элемента 200px отмечен на чертеже дизайна.Видно, что окно просмотра макета увеличено в 3 раза, а затем общий масштаб масштабируется до размера экрана устройства.Поскольку это чтобы доказать, что этот процесс не имеет ничего общего с dpr, я сейчас использую масштаб Размер установлен на 0,1 и 0,5

var meta = document.createElement('meta');
        var scale = 0.1;
        meta.setAttribute('name', 'viewport');

0.1

var meta = document.createElement('meta');
        var scale = 0.5;
        meta.setAttribute('name', 'viewport');

0.5

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

  1. Если значение масштаба меньше 0,1, вьюпорт компоновки можно увеличить только в 10 раз, то есть вьюпорт компоновки можно увеличить до 10 раз.
  2. Когда значение масштаба больше 1, область просмотра макета не сжимается, и область просмотра макета больше не соответствует ширине устройства, чего на самом деле не происходит.
  3. Если вы вводите гибкий.js для тестирования, будьте осторожны, чтобы удалить граничные условия, поскольку масштабирование влияет на размер области просмотра макета, будут срабатывать соответствующие граничные условия, что приведет к ошибочному мнению, что dpr связано с адаптацией.

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

200px : 640px => xrem : 10rem

Здесь 10rem — это ширина области просмотра макета Размер элемента должен только поддерживать это пропорциональное соотношение, которое не имеет ничего общего с dpr.

x= 10 * 200 / 640 = 3.125rem

Вычисление здесь может занять немного времени, и есть некоторые плагины, которые могут помочь преобразовать px в rem. Но план мёртв, люди живы, нужно только изменить десятые доли заложенные в Таобао, например проект дизайна 640px Измени это

document.documentElement.style.fontSize = (deviceWidth / 6.4) +'px';

разделить на 6,4 равных частей

200px : 640px => xrem : 6.4rem

x Я знаю, что это 2rem с первого взгляда

Процесс: rem => размер шрифта корневого элемента => область просмотра макета

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

Так почему же Taobao вводит dpr для увеличения и уменьшения макета? Одно из них заключается в том, что это решение может хорошо решить проблему границ в 1 пиксель. Кажется, что линии недостаточно тонкие, и есть несоответствие с дизайн-проектом, и план увеличения и уменьшения масштаба макета как раз компенсирует эту проблему. Но это также приносит проблему.Глядя на скриншот выше, мы видим, что размер шрифта изменился, и он практически невидим, когда масштаб установлен на 0,1.Причина в том, что обычно наши настройки размера шрифта не используют rem, Вместо этого используется единица px. Размер шрифта здесь не увеличивается с увеличением окна просмотра макета, а уменьшается с общим масштабированием страницы. Здесь мы должны реагировать на разные dprs. В коде Taobao мы можем быть видимый

docEl.setAttribute('data-dpr', dpr);

Это путем установки информации dpr в корневой элемент и последующей установки соответствующих свойств css, таких как

[data-dpr=2] div{
    font-size: 32px
}
[data-dpr=3] div{
    font-size: 48px
}

Специально для андроид телефонов, всякие магические дпр, было бы катастрофой, если бы каждый набор так делал Так что Taobao очень умный

 var isAndroid = win.navigator.appVersion.match(/android/gi);
        var isIPhone = win.navigator.appVersion.match(/iphone/gi);
        var devicePixelRatio = win.devicePixelRatio;
        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;
        }
        scale = 1 / dpr;

Простой и достаточно прямой, экрана Android HD не существует, но на самом деле влияние невелико, просто линия экрана Android толщиной 1 пиксель толще.

Если вы хотите быть отзывчивым в дополнение к адаптивности, вы должны установить шрифты один за другим, как указано выше, потому что мультимедийные запросы CSS также относятся к размеру области просмотра макета. Для Taobao и других должен быть набор инженерных решений для решения этой технической проблемы.Для партнеров, которые сталкиваются с этой ямой, предполагается, что они должны найти выход самостоятельно, и препроцессор необходим. Спереди видно, что Taobao ввел dpr не для того, чтобы быть адаптивным, а для решения проблемы 1px.Конечно, он привнес и другие проблемы.В этом случае гораздо проще отказаться от решения проблемы 1px. .

3. Решение NetEase

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

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

 (function () {
    var dpr = window.devicePixelRatio;
    function resize() {
      var deviceWidth = document.documentElement.clientWidth;
    document.documentElement.style.fontSize = (deviceWidth / 6.4) +'px';
   }
    resize();
    window.onresize = resize;
  })()

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

0.6
Из картинки видно, что отличие от решения Taobao в том, что вьюпорт макета не увеличивается, и не масштабируется вся страница, но это не влияет на пропорции дизайна.

200px : 640px => xrem : 6.4rem

x= 2rem

Поток: rem => размер корневого элемента => область просмотра макета

Поскольку адаптация не имеет отношения к dpr, многие решения можно расширить

4. Другие варианты

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

document.documentElement.style.fontSize = (screen.width/ 6.4) +'px';

Похожие статьи здесьПсевдоотзывчивая разработка на основе screen.width

2. Напрямую исправить видовой экран макета

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="viewport" content="width=640, user-scalable=no">//定死为设计稿的尺寸
  <meta name="renderer" content="webkit">
  <title>定死布局视口</title>
  <style>
    html, body {
      margin: 0
    }
    div {
      width: 200px;
      height: 200px;
      background: red;
    }

    body {
      background: blue;
    }
  </style>
  <script>
  </script>
</head>
<body>
  <div id="size200px">元素大小200px</div>
</body>

</html>

0.001

Нет модуля rem, нет необходимости устанавливать js, но после того, как окно просмотра макета исправлено, вы не можете использовать css media query для отзывчивости Отсюда вы также можете увидеть роль атрибута окна просмотра, который должен сделать окно просмотра макета адаптироваться к ширине экрана путем масштабирования. , width=device.width предназначен только для того, чтобы сделать начальный размер области просмотра макета равным ширине устройства, начальный масштаб, установленный позже, используется для масштабирования размера области просмотра макета, а значение по умолчанию равно что начальный размер вьюпорта макета равен ширине устройства, что является так называемым идеальным вьюпортом, другими словами, если вы зададите начальный масштаб, вам не нужно задавать width=device.width. схема Taobao, вы удаляете width=device.width, это не повлияет на адаптивный процесс, и это в основном для предотвращения некоторых несоответствий.Проблемы совместимости со спецификациями браузеров. Если вы все еще не можете понять роль окна просмотра, вы можете обратиться к взаимосвязи между окном просмотра и окном просмотра в svg.Принцип тот же.

3. Используйте новый блок vw, vw предназначен для самостоятельной адаптации, 100vw - это ширина вьюпорта лейаута, очень мощный, вам больше не нужно ставить js

200px: 640px => xvw : 100vw

x=200 * 100 / 640 = 31.25vw

Процесс: vw => вьюпорт компоновки

Обратите внимание на совместимость

Совместимость в порядке, вот соответствующая информацияПоделитесь передовыми технологиями, использованными в проекте «Китайский Новый год Hand Tao»

Суммировать

Адаптация мобильного терминала к размеру не имеет ничего общего с dpr.За исключением решения Taobao, другие решения должны иметь дело с проблемой 1px, но это также уменьшает проблемы с отзывчивой обработкой для разных устройств dpr, и ни одно из них не может решить все проблемы раз и навсегда. А так как новый агрегат vw, пора заходить на яму

Справочная статья

1. 张鑫旭 [基于screen.width的伪响应式开发](https://www.zhangxinxu.com/wordpress/2016/06/pseudo-response-layout-base-on-screen-width/)

2. 大漠 [分享手淘过年项目中采用到的前端技术](https://www.w3cplus.com/css/taobao-2018-year.html)

3. [fleible](https://github.com/huainanhai/flexible/blob/master/public/js/frame/flexible.debug.js)

4. 张鑫旭 [设备像素比devicePixelRatio简单介绍](设备像素比devicePixelRatio简单介绍)
Категории