Решение для адаптации мобильного веб-терминала

Введение

За последние несколько лет мобильный Интернет сильно разросся, и лагеря смартфонов Android и лагеря IOS конкурировали друг с другом, что привело к множеству версий системы (различным версиям системы); различным размерам экрана, технологиям отображения экрана ( Например, знаменитый экран с технологией Retina) появляется бесконечным потоком (размер экрана, технологии разнообразны), или стандарт CSS W3C также реализуется в различных мобильных браузерах (совместимость с браузерами разнообразна).

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

В этой статье представлена ​​только схема адаптации верстки стилей CSS, а что касается схемы адаптации HTML5 и JavaScript, то уже есть некоторые зрелые решения, такие как Babel, различные полифиллы и т. д., и их вкуснее использовать с Webpack.

2. Гибкое решение

Гибкое решение в основном контролируется JavaScriptviewportвозможность использоватьremмоделированиеvwфункции для достижения набора решений для целей адаптации.

Реализация Гибкого решения включает в себя и использует множество концепций, которые редко затрагивает разработка на стороне ПК.На самом деле, каким бы ни было решение по адаптации, оно основано на сортировке и управлении этими концепциями.Поэтому эти концепции очень важны для нас. понять и изучить. Глубокий принцип адаптации мобильного терминала особенно важен (конкретные концепции см.«Подробное объяснение адаптации мобильного терминала»).

2.1 Основная идея гибкости

2.1.1 Использование REM Analog VW функции адаптируется различные размеры экрана

remотносительноhtmlэлементальfont-sizeВычисленные значения свойств для выполнения расчетов.
установивdocumentElementизfontSizeЗначение атрибута может унифицировать стандарт макета всей страницы.

// set 1rem = viewWidth / 10
function setRemUnit () {
    var rem = docEl.clientWidth / 10
    // docEl为document.documentElement，即html元素
    docEl.style.fontSize = rem + 'px'
}
setRemUnit();

Как показано выше, гибкий нарезать на 10 копий ширины всей страницы, а затем расчетная ширина страницы1/10Установить какhtmlузлаfontSize, что означает, что после того, как мы находимся на текущей страницеhtmlПрименить к дочерним узлам узлаremКогда единица рассчитывается в соответствии с соотношением страниц.

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

настраиватьviewportизwidthдляdevice-width, сменить браузерviewportШирина по умолчанию (как для видовых экранов макета, так и для визуальных видовых экранов) — это идеальная ширина видового экрана, позволяющая пользователю видеть полное содержимое видового экрана макета в пределах идеального видового экрана.

Установка равного соотношенияviewportизinitial-scale,maximum-scale,minimum-scaleзначение для достижения1物理像素=1css像素, чтобы адаптироваться к эффекту отображения экрана с большим увеличением (то есть, чтобы избежать известной «проблемы 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.2 Периферийные инструменты для гибкой координации

2.2.1 PostCSS-px2rem

Гибкий б/уremТак как единица макета единого стандарта макета страницы, а ширина страницы делится на 10 равных частей, то при написании кода css нам необходимо рассчитать текущий код css.pxБлок соответствует текущему проектному проектуremКакое значение должно быть.
Для iPhone6 ​​пример: просмотра макета375px,но1rem = 37.5px, то ширина данного элемента на эскизе проекта равна75px(независимые от устройства пиксели), нам просто нужно установить его на75 / 37.5 = 2remВот и все.

Конечно, описанный выше способ работы заведомо неэффективен и неприемлем, мы можем использовать PostCSSpxtoremПлагин, который поможет нам завершить этот процесс расчета:

plugins: {
    ...,
    'postcss-pxtorem': {
        // 750设计标准
        rootValue: 75,
        // 转换成的rem后，保留小数点后几位
        unitPrecision: 5,
        /**
        * 将会被转换的css属性列表，
        * 设置为*表示全部，['*','*position*','!letter-spacing','!font*']
        * *position* 表示所有包含 position 的属性
        * !letter-spacing 表示非 letter-spacing 属性
        * !font* 表示非font-size font-weight ... 等的属性
        * */
        propList: ['*', '!letter-spacing'],
        // 不会被转换的class选择器名，支持正则
        selectorBlackList: ['.rem-'],
        replace: true,
        // 允许在媒体查询中转换`px`
        mediaQuery: false,
        // 小于1px的将不会被转换
        minPixelValue: 1
    }
}

Приведенный выше код представляет собой проект Webpack, основанный на Vue Cli3.x, и его необходимо настроить только в корневом каталоге текущего проекта.postcss.config.jsВ дополнение к настройке Webpack также могут использоваться другие методы настройки.кликните сюдачтобы понять.

postcss-pxtoremЭто может помочь нам преобразовать расчет значения px, который нам нужно преобразовать, в соответствующийremзначение, например:

.name-item {
    font-size: 40px;
  line-height: 56px;
  margin-left: 144px;
  border-top: 1PX solid #eeeeee;
  color: #333333;
}

После преобразования это выглядит так:

.name-item {
    font-size: .53333rem;
  line-height: .74667rem;
  font-weight: 700;
  margin-left: 1.92rem;
  border-top: 1px solid #eee;
  color: #333;
}

2.3 Дефекты гибкости

2.3.1 Несовместимое использование фреймов.

которыйiframeСодержимое, показанное в, по-прежнему используетcssпикселей, будут проблемы на экранах с большим увеличением, например, когда мы используемiframeПри ссылке на ресурс воспроизведения видео Tencent Video кнопка воспроизведения видеопроигрывателя отличаетсяdprДисплеи сильно различаются на устройствах:

На картинке мы видим, что кнопка воспроизведенияdpr = 2устройств, чем размер, отображаемый наdpr = 3на устройстве намного больше, и если вы внимательно его измерите, то обнаружите, что1.5раз, если вы читалиПодробное объяснение адаптации мобильного терминала, то легко понять, почему, и мы не будем вдаваться в это здесь.

2.3.2 Не работает с телефонами Android с экранами с большим увеличением

если вы исследовали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;
}

Так почему же Flexible не адаптируется к экрану Android с большим увеличением? Я думаю, что Flexible делает это не просто так: в течение долгого времени телефоны Androiddprразнообразие, от1прибыть4даже к5, даже больше1.75,2.6,3.5ТакойdprЦенности бесконечны. Поэтому Гибкий просто и грубо жмет руку Android прямо под компромисс.dpr = 1В обращении его можно рассматривать как быстрый нож для устранения беспорядка.

Конечно, мы также можем вручную изменитьlib-flexibleисходный код, чтобы компенсировать этот недостаток, но мы можем ориентироваться только на теdprАдаптация для целочисленных устройств Android, для более экзотическихdprПросто игнорируйте это. Тем не менее, Бог знает телефон AndroiddprКаково максимальное целочисленное значение? Бог знает (Samsung S8dprто есть4)

2.3.3 Несовместимый адаптивный макет

Отзывчивый макет, его основной подход заключается в объединенииcss3медиазапросы@mediaСоздайте специальные макеты для некоторых пороговых значений размера, таких как768pxНа следующем экране используется компактная компоновка, справа769pxприбыть992pxЭкран экрана делает смешанную компоновку графики и текста, и для больших, чем992pxЭкран богат элементами, многоэлементной компоновкой и т.д.

.main-content {
    max-width: 70em
}
@media screen and (min-width: 0) {
    .main-content {
        margin:0 6.4935064935%
    }
}
@media screen and (min-width: 45em) {
    .main-content {
        margin:0 5.1282051282%
    }
}
@media screen and (min-width: 70em) {
    .main-content {
        margin:0 5.1282051282%
    }
}

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

2.3.4 Размер системного шрифта не отвечает правильно

Согласно теории реализации Flexible, мы все знаем, что она устанавливаетсяhtmlэлементальfont-sizeразмер, чтобы гарантировать, что все элементы на странице используютremЕдиницы стилизованы относительноhtmlэлементальfont-sizeстоимость.

Однако в среде WeChat (или других веб-браузерах, которые могут устанавливать размер шрифта, таких как Safari), установите размер шрифта WeChat (больше), а затем откройте веб-страницу, адаптированную с помощью технологии Flexible, вы обнаружите, что страница планировка беспорядочная , все используяremЭлементы заданного размера стали крупнее, в это времяhtmlизfont-sizeРазмер тот же, но элемент больше, почему?

На самом деле, хотя Flexible помогает нам использовать<meta/>набор метокwidth=device-widthа такжеuser-scalable=noи соответствующийscaleМасштабируйте значения, чтобы сохранить размер наших элементов на экранах с высокой мощностью (dpr >= 2 ) отображается нормально, но после настройки размера шрифта веб-браузера наш "вьюпорт" тоже пропорционально уменьшается в ответ, то есть визуальный вьюпорт (window.innerWidth), и вдруг это не то, что наши элементы становятся больше, а то, что наше визуальное окно просмотра становится меньше!

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

Зная причину ошибки, можем ли мы ее решить? Ответ заключается в том, что в гибком решении это невозможно, но это может быть прекрасно решено в решении Viewport, которое будет упомянуто далее. Историческая миссия Flexible завершена, давайте откажемся от Flexible и примем новые изменения.

3. Решение области просмотра

Схема Viewport в основном используется вcss3Добавлено в CSS Values ​​and Units Module Level 3 (рекомендация кандидата)<length>единица измеренияvw,vh,vmaxа такжеvmin. По определению, они являются относительными единицами, и их относительная система отсчета является «визуальным окном просмотра»:

unit	относительно (эталонной единицы)
'vw'	1% ширины области просмотра
'vh'	1% высоты области просмотра
'vmax'	1% большего размера ViewStort (тем больше VW и VH)
'vmin'	1% меньшего размера окна просмотра (большее из значений vw и vh)

vminа такжеvmaxОн рассчитывается по значению размера с большей длиной в окне просмотра, еслиwindow.innerHeight > window.innerWidthноvminстоимостьwindow.innerWidth / 100,vmaxстоимостьwindow.innerHeight / 100.

Могут быть студенты, которых беспокоит совместимость браузера с решением Viewport.Мы можем использоватьcaniuseДавайте проверим совместимость единиц просмотра в различных основных версиях браузера:

Как видно из рисунка, большинство мейнстримных браузеров в основном уже поддерживают единицу вьюпорта, а некоторые светло-зеленые версии браузеров указывают на частичную поддержку, а основное содержание в том, что они не совместимы.vmaxа такжеvminиспользование; и некоторые из известных проблем, перечисленных в столбце «Знаю проблемы», в основном связаны с масштабированием пользователей.viewportразмер илиIOS 7 SafariУникальное ошибочное поведение, которое мы можем контролировать.

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

для тех, кто только существуетIOS 7 SafariА некоторые проблемы, которые появятся только в старой версии, об этом можно не беспокоиться, ведь ей 9102 года, аIOS 7Он «официально запущен 18 сентября 2013 г., его можно бесплатно загрузить и обновить в 1:00 19 сентября 2013 г.».iPhoneЕсли вы не обновите систему, она даст вам ограничение скорости и операцию смены карты.Вероятность повторного появления этой древней системы почти 0.

3.1 Ядные мысли о просмотре просмотра

3.1.1 Использование vw в качестве единицы размещения элемента

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

Начиная с нашей фактической разработки, мы теперь используем его единообразноiPhone6визуальное оформление (т.е. ширина750px),Так100vw=750px,Прямо сейчас1vw = 7.5px. Тогда, если ширина элемента на эскизе дизайнаvalueпиксель, то его соответствующее значение vw может быть передано черезvw = value / 7.5быть рассчитаны.

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

• Адаптация контейнера, которую можно использоватьvw
• Текстовая адаптация, которую можно использоватьvw
• больше, чем1pxможно использовать границы, закругленные углы, тениvw
• Можно использовать как отступы, так и внешние поля.vw

3.1.2 Несовместимая обработка понижения версии

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

• CSS Houdini: обработка vw через CSS Houdini и вызов API CSSUnitValue, предоставляемого CSS Typed DOM Level1;
• CSS Polifill: обработка ответа осуществляется через соответствующий Polyfill.В настоящее время основными полифиллами для модулей vw являются: vminpoly, Viewport Units Buggyfill, vunits.js и Modernizr. То, что рекомендует Учитель Да Мо, это Viewport Units Buggyfill.

3.2 Периферийные инструменты для решения Viewport

3.2.1 postcss-px-to-viewport

postcss-px-to-viewportРоль плагина иpostcss-pxtoremимеет аналогичный эффект и используется в основном дляpxПреобразовать единицу вvw,vh,vminилиvmaxтакие единицы области просмотра (рекомендуется конвертировать вvw, другие модули имеют более или менее проблемы с совместимостью), и это также один из основных плагинов схемы адаптации видового экрана.

комбинироватьwebpackПри настройке проекта вам нужно только настроить его в корневом каталоге проекта.postcss.config.jsОсновные элементы конфигурации следующие:

plugins: {
'postcss-px-to-viewport': {
    unitToConvert: 'px',   // 需要转换的单位
    viewportWidth: 750,    // 视口宽度，等同于设计稿宽度
    unitPrecision: 5,      // 精确到小数点后几位
    /**
    * 将会被转换的css属性列表，
    * 设置为 * 表示全部，如：['*']
    * 在属性的前面或后面设置*，如：['*position*']，*position* 表示所有包含 position 的属性，如 background-position-y
    * 设置为 !xx 表示不匹配xx的那些属性，如：['!letter-spacing'] 表示除了letter-spacing 属性之外的其他属性
    * 还可以同时使用 ! 和 * ，如['!font*'] 表示除了font-size、 font-weight ...这些之外属性之外的其他属性名头部是‘font’的属性
    * */
    propList: ['*'],
    viewportUnit: 'vw',    // 需要转换成为的单位
    fontViewportUnit: 'vw',// 需要转换称为的字体单位
    /**
    * 需要忽略的选择器，即这些选择器对应的属性值不做单位转换
    * 设置为字符串，转换器在做转换时会忽略那些选择器中包含该字符串的选择器，如：['body']会匹配到 .body-class，也就意味着.body-class对应的样式设置不会被转换
    * 设置为正则表达式，在做转换前会先校验选择器是否匹配该正则，如果匹配，则不进行转换，如[/^body$/]会匹配到 body 但是不会匹配到 .body
    */
    selectorBlackList: [],
    minPixelValue: 1,      // 最小的像素单位值
    mediaQuery: false,     // 是否转换媒体查询中设置的属性值
    replace: true,                 // 替换包含vw的规则，而不是添加回退
    /**
    * 忽略一些文件，如'node_modules'
    * 设置为正则表达式，将会忽略匹配该正则的所有文件
    * 如果设置为数组，那么该数组内的元素都必须是正则表达式
    */
    exclude: [],
    landscape: false,      // 是否自动加入 @media (orientation: landscape)，其中的属性值是通过横屏宽度来转换的
    landscapeUnit: 'vw',   // 横屏单位
    landscapeWidth: 1334   // 横屏宽度
}

В настоящее время выпущен проект визуального дизайна, и мы все используем750pxширина, то100vw = 750px,Прямо сейчас1vw = 7.5px. Тогда мы можем в соответствии с расчетной схемойpxЗначение напрямую преобразуется в соответствующийvwстоимость. В самом процессе кодирования нет необходимости производить какие-либо вычисления, просто пропишите это в кодеpxВот и все,postcss-px-to-viewportЭто автоматически поможет нам преобразовать расчет пикселей в соответствующийvwзначение, например:

.name-item {
    font-size: 40px;
  line-height: 56px;
  margin-left: 144px;
  border-top: 1PX solid #eeeeee;
  color: #333333;
}

После преобразования:

.name-item {
    font-size: 5.33333vw;
  line-height: 7.46667vw;
  margin-left: 19.2vw;
  border-top: 1px solid #eee;
  color: #333;
}  

Конечно,postcss-px-to-viewportболее того, он также может быть использован вselectorBlackListУстановите некоторые ключевые слова или регулярные выражения в параметрах, чтобы избежать преобразования этих указанных селекторов, напримерselectorBlackList：['.ignore', '.hairlines']:

<div class="box ignore"></div>
写CSS的时候： 
.ignore {
    margin: 10px;
    background-color: red;
}
.box {
    width: 180px;
    height: 300px;
}
.hairlines {
    border-bottom: 0.5px solid red;
}

После преобразования:

.box {
    width: 24vw;
    height: 40vw;
}
.ignore {
    margin: 10px; /*.box元素中带有.ignore类名，在这个类名写的`px`不会被转换*/
    background-color: red;
}
.hairlines {
    border-bottom: 0.5px solid red;
}

3.2.2 Viewport Units Buggyfill

Эта библиотека js предназначена для совместимости с теми, которые несовместимы.vw,vh,vmax,vminБраузеры, используемые этими единицами просмотра, были уточнены в начале программы, и большинство браузеров большинства моделей теперь совместимы.viewportUnit, г-н Да Мо протестировал Top30 популярных моделей примерно в 2017 году, и только следующие модели не полностью поддерживают единицы измерения области просмотра:

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

3.2.2.1 Как использовать

1. Импортируйте файл JavaScript

viewport-units-buggyfillВ основном есть два файла JavaScript:viewport-units-buggyfill.jsа такжеviewport-units-buggyfill.hacks.js. Вам просто нужно включить эти два файла в свой HTML-файл. Например, в проекте Vueindex.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>

2. Вызвать viewport-units-buggyfill в файле HTML

импортировать в html файлpolyfillПосле локации нужно вручную вызвать следующуюviewport-units-buggyfill:

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

3. В сочетании с postcss-viewport-unit

конкретное использование. В твоемCSS, поскольку используется единица области просмотра, ее необходимо добавить в стильcontent:

.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);';
}  

Это может сделать вас больным, и мы не можем писать каждый разvwВсе идут на расчет человеческой плоти. В частности, в этом нашем сценарии мы использовалиpostcss-px-to-viewportЭтот плагин для преобразованияvw, не говоря уже о добавлении человеческого мясаcontentсодержание.

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

.test {
    padding: 3.2vw;
    margin: 3.2vw auto;
    background-color: #eee;
    text-align: center;
    font-size: 3.73333vw;
    color: #333;
    content: "viewport-units-buggyfill; padding: 3.2vw; margin: 3.2vw auto; font-size: 3.73333vw";
}  

Настроить этот плагин тоже очень просто, нужно только настроитьpostcss-px-to-viewportТо же самое, настроенное в корневом каталоге проектаpostcss.config.jsв:

plugins: {
  'postcss-viewport-units': {}
} 

3.2.2.2 Побочные эффекты

После того, как мы воспользуемся модулем Viewport Units Buggyfill, как видите, потребуетсяcontentсвойств, поэтому это вызовет более или менее побочные эффекты. Такие какimgИспользование элементов и псевдоэлементов::beforeили::after.

Для img в некоторых браузерахcontentНаписание приведет к тому, что изображение не будет отображаться нормально. В настоящее время вам необходимо добавить глобальное переопределение стиля:

img {
    content: normal !important;
} 

для::beforeДля псевдоэлементов, даже если в них используются единицы измерения vw, на них не будет работать Viewport Units Buggyfill, например:

// 编译前
.after {
    content: 'after content';
    display: block;
    width: 100px;
    height: 20px;
    background: green;
}
// 编译后
.after[data-v-469af010] {
    content: "after content";
    display: block;
    width: 13.333vw;
    height: 2.667vw;
    background: green;
} 

3.3 Дефекты схемы видового экрана

использоватьvwсделать адаптацию, но и разобраться с некоторыми деталями是存在一定的缺陷的。 比如当容器使用vw，margin采用px时，很容易造成整体宽度超过100vw，从而影响布局效果。当然我们也是可以避免的，例如使用padding代替margin，结合функция calc()` использовать и т.д...

также,pxПеревести вvwНе обязательно полностью делимые, поэтому есть определенная разница в пикселях.

3.3.1 Адаптация экрана с большим увеличением

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

3.3.1.1 Проблема с 1 пикселем

На самом деле, в Интернете о1pxСуществует много решений для решения проблемы отображения экрана высокой мощности, например, г-на Да Мо.Давайте снова поговорим о Retina1pxРешение, Чжоу Цзюньистинное восстановление сетчатки1pxпограничное решение, методов больше, чем проблем.

Объединив приведенные выше решения, я также собрал несколько решений, рекомендованных большими парнями, и проверил их эффекты:

• Объединитьpostcss-write-svgа такжеborder-imageилиbackground-imageрешить1pxвопрос

border-imageХотя решение очень полезное, но в некоторых бюджетных моделях иiosПроблема совместимости устройства. В основном это проявляется в том, что отсутствует нижняя и правая границы при отображении 4 границ в некоторых младших моделях Android, таких как Meizu Note1;iPhone5s,iPhone6s,iPhone6s PlusЭто не проявляется напрямую (я не знаю, неправильная ли у меня поза).

border-imageЕще одна проблема – невозможность сделать закругленные углы.

background-imageСхема может быть лучше отображена на вышеперечисленных моделях, но в схеме фоновой картинки необходимо предусмотреть 2-х пиксельную картинку, такую ​​как:

fineLine(color = #e8e8e8, position = bottom)
  if position == top || position == bottom
    background-repeat: repeat-x
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAAXNSR…hZcwAADsMAAA7DAcdvqGQAAAAQSURBVBhXY5g5c+Z/BhAAABRcAsvqBShzAAAAAElFTkSuQmCC)
    if position == top
      background-position: 0 0
    else
      background-position: 0 100%
  else
    background-repeat: repeat-y
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAAXNSR…hZcwAADsMAAA7DAcdvqGQAAAAQSURBVBhXY5g5c+Z/BhAAABRcAsvqBShzAAAAAElFTkSuQmCC)
    if position == left
      background-position: 0 0
    else
      background-position: 100% 0

Конечно, мы также можем использоватьpostcss-write-svgВозможность написать программу, которая может рисовать два типаbase64Изображение вне:

// 画出来的图片如图一(上下)
@svg squareLR {
    width: 1px;
    height: 2px;
    @rect {
        fill: var(--color, black);
        width: 100%;
        height: 50%;
    }
}
// 画出来的图片如图二(左右)
@svg squareTB {
    width: 2px;
    height: 1px;
    @rect {
        fill: var(--color, black);
        width: 50%;
        height: 100%;
    }
}
// 顺便还可以优化下我们的mixin写法  
fineLine(color = #e8e8e8, position = bottom)
  if position == top || position == bottom
    background-repeat: repeat-x
        background-image: svg(squareLR param(--color color))
    if position == top
      background-position: 0 0
    else
      background-position: 0 100%
  else
    background-repeat: repeat-y
        background-image: svg(squareTB param(--color color))
    if position == left
      background-position: 0 0
    else
      background-position: 100% 0

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

bgLine($color = #efefef, $direction = all)
  background-repeat: no-repeat
  if $direction == all
    border: none
    padding: 1px
    background-image:
      -webkit-linear-gradient(top, transparent 50%, $color 50%),
      -webkit-linear-gradient(right, transparent 50%, $color 50%),
      -webkit-linear-gradient(bottom, transparent 50%, $color 50%),
      -webkit-linear-gradient(left, transparent 50%, $color 50%)
    background-image:
      linear-gradient(to top, transparent 50%, $color 50%),
      linear-gradient(to right, transparent 50%, $color 50%),
      linear-gradient(to bottom, transparent 50%, $color 50%),
      linear-gradient(to left,transparent 50%, $color 50%)
    background-size:
      100% 1px,
      1px 100%,
      100% 1px,
      1px 100%
    background-position:
      top center,
      right center,
      bottom center,
      left center
  else
    background-position: $direction center
    background-image: -webkit-linear-gradient($direction, transparent 50%, $color 50%);
    background-image: linear-gradient(to $direction, transparent 50%, $color 50%);
    if $direction == left || $direction == right
      background-size: 1px 100%
    if $direction == top || $direction == bottom
      background-size: 100% 1px
.test
    width 400px
  padding 24px
  margin 24px
  bgLine(red, all)  

Тем не менее, схема фонового изображения градиентного цвета все еще имеет свои недостатки, такие как невозможность установки закругленных углов границы, необходимость поддерживать относительно громоздкий код управления градиентным цветом (хотя он может быть перемещен один раз в 10 000 лет) и т. д., но это все же адаптация, которую стоит попробовать.

•0.5pxстроить планы

0.5pxпрограмма вIOS8После этого есть хорошая поддержка, все, что я могу найтиiPhoneВсе устройства четко показывают тонкие линии, которые нам нужны (но дляiPhone 6s Plus,iPhone X,iPhone XsУстройства iOS с 3-кратным экраном не настоящие1физические пиксели, но1.5физических пикселей, но имеет небольшой эффект).

Но на Android-устройствах он смешанный, после моего тестирования, вAndroid5.1После версии каждое устройство в основном совместимо0.5pxНормальное отображениеAndroid5.1Если версия устройства не может нормально отображаться, то предполагается, что используется js-код для того, чтобы сделать некий хак, и задействована гибкая схема адаптации, чтобы сделать его совместимым, это просто технологический откат и недопустимо.

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

• Псевдоэлемент + схема масштабирования преобразования

Метод псевдоэлемента + масштаб преобразования более лаконичен, управляем и прост для понимания, чем приведенные выше решения, и этот метод также поддерживает установку закругленных углов. Эта схема адаптации в основном используется в большинстве мобильных продуктов Tencent и Jingdong (мобильные продукты Alibaba, такие как мобильная версия Taobao, мобильная версия Tmall и т. д. не адаптируются к 1px, удивительно! это понятно~ более капризно).

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

border-1px($color = #ccc, $radius = 2PX, $direction = all)
  position: relative
  &::after
    content: ""
    pointer-events: none
    display: block
    position: absolute
    border-radius: $radius
    box-sizing border-box
    width 100%
    height 100%
    left: 0
    top: 0
    transform-origin: 0 0
    if $direction == all
      border: 1PX solid $color
    else
      border-{$direction}: 1PX solid $color
    @media only screen and (-webkit-min-device-pixel-ratio:2)
      width: 200%
      height: 200%
      border-radius: $radius * 2
      transform: scale(.5)
    @media only screen and (-webkit-min-device-pixel-ratio:3)
      width: 300%
      height: 300%
      border-radius: $radius * 3
      transform: scale(.333)

3.3.1.2 Проблема размытия изображения

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

Готово, посыпать цветами.

В-четвертых, сообщение

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

5. Ссылка

•Woohoo. Я 3 от Prussia.com/Mobile/VW-com…
•Woohoo. Я тренировался с prussian.com/CSS/fix-1…
•Woohoo. Я 3 от prussian.com/CSS/VW-foru-…
•Woohoo. Я 3 от prussian.com/Mobile/Church-…
•blog.51CTO.com/Чжоу Луцзюнь/2…
•nuggets.capable/post/684490…
•Блог Woohoo.cn на.com/sun Lemon/afraid/…
•сегмент fault.com/please/101000001…
•блог Ты о нет 6.com/2018/06/03/…