Что именно делает метатег?
Друзья, которые делали мобильную адаптацию, наверняка сталкивались с этой строкой кода:
<meta name="viewport" content="width=device-width, initial-scale=1.0">Однако у многих друзей есть только перцептивное понимание: о, я добавил эту строку кода, и тогда ширина страницы будет такой же, как ширина моего устройства. Однако это понимание весьма однобоко. Итак, в чем суть этой фразы?
Не волнуйтесь, давайте сначала посмотрим вниз, здесь саспенс.
Несколько имен собственных и единиц
Здесь сначала выделим некоторые существительные и числовые единицы, которые часто будут встречаться при адаптации.
Во-первых, давайте посмотримфизический пиксель.
Возьмите iphone6 в качестве примера, вы можете знать:
разрешение: 1334 x 750 пикселей
Это означает, что на экране 1136 физических пикселей по вертикали и 750 физических пикселей по горизонтали.
Размер экрана: 4,7 дюйма
Обратите внимание, что дюймы — это единицы длины, а не площади. 4,7 дюйма — это длина диагонали экрана, а 1 дюйм равен 2,54 см.
плотность пикселей экрана: 326 пикселей на дюйм
Относится к количеству пикселей на дюйм экрана в мониторе, dpi = ppi. Dpi подчеркивает, сколько точек на дюйм. в то же время,плотность пикселей экрана=разрешение/Размер экрана
Далее, давайте посмотрим на другие единицы.
Независимый от устройства пиксель: Пиксели, не зависящие от устройства, в отличие от пикселей устройства (физических пикселей), которые виртуализируются. Например, пиксели CSS, мы часто говорим, что 10px на самом деле относятся к ним. должны знать о том,физический пиксельРазработчики не могут этого понять, это то, что существует естественным образом, насколько это должно быть.
соотношение пикселей устройства: Сокращенное названиеdpr, значение, которое мы часто видим в верхней части отладки мобильной консоли Google.соотношение пикселей устройства = пиксель устройства / CSS пиксель(вертикальный или горизонтальный). Его можно получить через JS:window.devicePixelRatio
Различные окна просмотра для ПК и мобильных устройств
Примечание. Упомянутые ниже пиксели являются пикселями CSS. И по умолчанию масштабирование не учитывается.
видовой экран макета
Друзья, которые писали css, должны знать, что мы находимся вhtml,bodyнастраиватьwidth:100%;height:100%;, это не является недействительным. мы все знаем100%Этот процент должен быть унаследован от родительского элемента. Так где тут наследство?
существуетБраузер для ПК, есть что-то, что ограничивает область просмотра макетов CSS, также известное как начальный содержащий блок. Это источник всего наследования ширины и высоты. Удалитьmargin,padding, область просмотра макета имеет ту же ширину, что и видимое окно браузера, а также ширину самого браузера.
Но когдамобильный, сильно отличается.
Следующий пример безmetaДемонстрируется под помещением лейбла.
Если мы сейчас сделаем левый и правый макет по 28 точек, то если он будет отображаться на стороне ПК, эффект отображения будет очень совершенным, тут и говорить нечего.
Если это на мобильном телефоне, вот пример iphone6:
Пример выглядит следующим образом:
код показывает, как показано ниже:
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
width: 100%;
}
.left {
float: left;
width: 20%;
height: 100%;
background: red;
}
.right {
float: right;
width: 80%;
height: 100%;
background: green;
}
----
<body>
<div class="left"></div>
<div class="right"></div>
</body>Здесь мы увидим, почемуbodyВысота980px, а ширина браузера составляет всего375px, то это980pxОткуда это?
Собственно, здесь980pxэто называется мобильныйвидовой экран макета.
На мобильных устройствах по умолчанию ширина окна просмотра макета намного больше, чем ширина браузера. Эти два окна просмотра отличаются со стороны ПК, онисуществуют независимо друг от другаиз. Зачем? Только представьте, если веб-страница не адаптирована под мобильный терминал, то при ее прочтении пользователем, если ширина вьюпорта макета по умолчанию равна ширине браузера, она будет более недружественно отображаться. То есть, еслиdivширина составляет 20%, тогда ширина окна просмотра макета980px, пиксели, отображаемые пользователю, по-прежнему равны 196 пикселям, и если ширина составляет всего375pxслучай, ширина только75px, размер дисплея сильно отличается.
Поэтому, чтобы пользователи могли хорошо отображать веб-страницы на маленьких экранах, производители браузеров устанавливают очень большую ширину области просмотра макета.768px ~ 1024pxМежду ними наиболее распространенная ширина980px. Эта ширина может бытьdocument.documentElement.clientWidthполучать.
визуальное окно просмотра
Для визуального окна просмотра это то, что представляется пользователю, и это количество пикселей CSS, которые пользователь видит в области страницы. Разработчикам не нужно заострять внимание на этом окне просмотра, поскольку у пользователя есть возможность увеличивать и уменьшать масштаб.
Стоит отметить, что вмобильныйМасштабирование не меняет ширину окна просмотра макета, при уменьшении масштаба экран покрывает больше пикселей CSS, а визуальное окно просмотра становится больше, и наоборот.
пока вСторона ПК, масштабирование соответствует как ширине макета, так и ширине визуального окнасвязьиз. Сама ширина браузера фиксирована, как бы вы ни масштабировали ее, это не повлияет.
Если вы все еще не уверены в приведенной выше ширине, вот таблица, которая поможет вам разобраться.
Следующие таблицы расположены по горизонтали в зависимости от ширины окна браузера:
Для ПК:
Для мобильных устройств:
идеальное окно просмотра
Выше окно просмотра макета, очевидно, очень недружелюбно для пользователей, полностью игнорируя исходный размер телефона.
Поэтому Apple ввела понятие идеального окна просмотра, которое является наиболее идеальным размером окна просмотра макета для устройства. Идеальная ширина для веб-пользователей в идеальном окне просмотра без масштабирования при входе пользователя на страницу.
Тогда очевидно, что так называемая идеальная ширина — это ширина браузера (экрана).
Итак, есть следующий код:
<meta name="viewport" content="width=device-width">Однако этот код на самом деле не идеален.В браузере IE на него повлияет переключение между горизонтальным и вертикальным экранами.Чтобы решить эту проблему совместимости,добавляем предложение в конце,и имеем настоящее:
<meta name="viewport" content="width=device-width,initial-scale=1">
width=device-widthЭтот код устанавливает область просмотра макета на ширину браузера (экрана).
initial-scale=1Это означает, что начальный коэффициент масштабирования равен 1. При его использовании размер окна просмотра макета также устанавливается равным масштабированному размеру. Размер увеличения основан на ширине экрана, которая также играет роль вwidth=device-widthТот же эффект.
Кроме того, стоит упомянуть, что когда мы выполняем медиа-запрос, значение ширины запроса на самом деле является значением ширины окна просмотра макета.
Экран Retina и обычный экран, происхождение размытия
Удельная производительность dpr
Иногда мы обнаруживаем, что когда мы подбираем определенную модель, проблем с дисплеем не возникает. Но как только перешел на другой телефон, появилось размытие, особенно на картинках.
На самом деле эта проблема связана с одним из свойств, упомянутых выше:соотношение пикселей устройства, что мы часто говоримdpr. давайте сначала посмотримdprПредставление:
Если предположить, что сейчас есть iPhone 6, его аппаратно-независимые пиксели составляют 375x667, его dpr — 2, а размер — 4,7 дюйма, поэтому его физические пиксели составляют 750x1334. Точно так же у нас также есть неизвестное устройство, чьи аппаратно-независимые пиксели имеют размер всего 375x667 и 4,7 дюйма, но dpr равен 1, а физические пиксели в это время имеют размер 375x667.
В результате их внешний вид на экране выглядит следующим образом:
На разных экранах, будь то обычный экран или экран ретина,CSS-пиксели отображают одинаковый размер. (Если вы не понимаете это предложение, вы можете написать квадрат размером 2 пикселя, чтобы использовать консоль Google для отладки на мобильных устройствах, переключаться между разными устройствами, и вы обнаружите, что размер на самом деле одинаков. Сначала я всегда думал, что фактический размер этого пикселя css. Ширина и высота несовместимы на разных устройствах из-за влияния dpr.)
Разница в том, что 1 пиксель CSS соответствует (покрывает) количеству физических пикселей.
Поэтому, если мы хотим отобразить такой стиль CSS на этих двух экранах:
width: 2px;
heigth: 2px;На обычном экране, то есть на экране с dpr, равным 1, один пиксель css соответствует (покрывает) одному физическому пикселю. Под экраном сетчатки 1 пиксель css соответствует (покрывает) 4 физическим пикселям. Другими словами, устройство с dpr, равным 2. Посмотрите на картинку ниже:
Простое понимание состоит в том, что его можно рассматривать как квадрат 2 см x 2 см, который разрезается на четыре части, а затем, когда dpr равен 2, четыре разрезанные части разрезаются на четыре части соответственно, но общая площадь остается неизменной.
размытие
Зная, что физические пиксели, покрываемые 1 пикселем CSS, могут быть разными, легко понять, почему происходит размытие.
Вот еще существительное:растровые пиксели.
Пиксель растрового изображения — это наименьшая единица данных растрового изображения (например, png, jpg, gif и т. д.). Каждый пиксель растрового изображения содержит собственную информацию об отображении. (такие как: положение отображения, значение цвета, прозрачность и т. д.)
Теоретически,1 пиксель растрового изображения соответствует 1 физическому пикселю, и картинка может отображаться только идеально и четко.
Но, как упоминалось выше, на экране сетчатки будет 1 пиксель растрового изображения, соответствующий нескольким физическим пикселям.
Возьмем, к примеру, iPhone 6: 1 растровый пиксель соответствует 4 физическим пикселям. Поскольку один пиксель растрового изображения уже является наименьшей единицей данных, его больше нельзя разрезать. Поэтому, чтобы иметь возможность отображать, мы можем выбрать только ближайший цвет, что приводит к так называемой проблеме размытия изображения. следующим образом:
Как решить
Очевидно, что из-за отсутствия пикселей в растровом изображении решение очень простое — использовать картинку с таким же кратным размером, как у dpr. Например, iphone6, 200x300imgМетки, исходное изображение должно иметь размер 400x600.
затем при загрузке вimgВ теге браузер автоматически уменьшит вдвое CSS-пиксели каждого 1 пикселя, что можно понимать как поддержание соотношения 1:1 пикселей CSS: физические пиксели на данный момент без размытия.
Этот метод на самом деле является одним из важных принципов для команды хэнд-дао при адаптации сетчатки, он будет обсуждаться позже, но я не буду говорить о нем здесь.
разное
Подумайте об этом в обратном порядке, что произойдет, если обычный экран, то есть экран с dpr, равным 1, также будет использовать в два раза больше изображений?
Очевидно, что при обычном экране разрешение 200×300imgКоличество физических пикселей, соответствующих метке, равно 200×300, а количество пикселей растрового изображения, удвоенного изображения, равно 200x300x4, поэтому существует физический пиксель, соответствующий 4 пикселям растрового изображения, поэтому его выбор цвета также можно только уменьшить. по определенному алгоритму, и результат отображения составляет только одну четверть от общего количества пикселей в исходном изображении.Хотя изображение не будет размытым для невооруженного глаза, оно будет чувствовать небольшую хроматическую аберрацию. (На самом деле это неопределенный обратный процесс)
На картинках это означает:
Вот выдержка из интернетаСообщение блогаДемонстрация для иллюстрации упомянутой выше проблемы.
Выше приведено изображение 100x100, помещенное в контейнеры 100x100, 50x50 и 25x25 соответственно, и эффект отображения под экраном Retina.
Разницу между граничными пикселями можно увидеть через увеличительное стекло палитры цветов:
На рисунке 1 цвет граничных пикселей выбран рядом, а значение цвета находится между красным и белым, что является светлым, и картинка выглядит размытой (это можно понять как растяжение картинки).
На рисунке 2 картина нормальная и четкая.
На рисунке 3 цвет граничных пикселей выбран рядом, а значение цвета находится между красным и белым, что является более толстым, и изображение выглядит хроматической аберрацией.
Гибкая компоновка команды Hand Tao.js
Сегодня традиционная rem-раскладка, адаптированная для мобильного телефона, постепенно заменяется набором гибких раскладок от команды Taobao.
Конкретный метод реализации и подробности здесь не раскрываются, за подробностями обращайтесь к статье w3cplus.статья, легко читается и понимается.
Здесь я хотел бы проанализировать смысл и смысл практики гибкого js.
Прочитав статью, я считаю, что каждый должен быть знаком со всем процессом разработки и адаптации.
Предположим, теперь вы хотите адаптироваться к устройству iphone6. Различные параметры iphone6 были упомянуты выше, поэтому я не буду их здесь повторять.
тогда:
- Дизайнер дал эскиз дизайна с шириной 750px (обратите внимание, что здесь 750px вместо 375px)
- Разработчики внешнего интерфейса начинают восстанавливать с этим соотношением 750 пикселей.
- Преобразование ширины и высоты px в rem
- Шрифты используют px вместо rem
- flexible.js автоматически определит dpr для масштабирования всего окна просмотра макета.
rem макет и обработка шрифтов
Из гибкого.js видно, что rem используется для ширины и высоты, что необходимо для обеспечения пропорционального масштабирования макета на устройствах с разной шириной.
А почему шрифт использует не rem а px?
Прежде всего, друзья, которые использовали единицы измерения rem, обнаружат, что после использования rem из-за разных размеров после преобразования появляются различные странные значения, наиболее очевидным из которых является большее количество знаков после запятой, например13.755pxтакие значения, как . В браузерах бывают отклонения в расчете десятичных знаков в разных браузерах, а некоторые и с десятичными знакамиfont-sizeВ некоторых браузерах значение отображается недостаточно четко.
Во-вторых, мы не хотим отображать на маленьком экране такое же количество шрифтов, как на большом экране. А если использовать rem, то из-за существования равных пропорций возникнет ситуация, когда мелкоэкранный шрифт окажется меньше под малым экраном, что не способствует нашему лучшему чтению и идет вразрез с первоначальным замыслом адаптации. Поэтому для адаптации шрифта лучше использовать px и медиазапросы для адаптации.
Так что нетрудно объяснить, почемуfont-sizeУвеличенная обработка, следующий код sass:
@mixin font-dpr($font-size) {
font-size: $font-size;
[data-dpr="2"] & {
font-size: $font-size * 2;
}
[data-dpr="3"] & {
font-size: $font-size * 3;
}
}Из-за разницы в dpr под экран retina мы хотим отображать одинаковый размер шрифта, поэтому увеличиваем кратность dpr для шрифта, чтобы при уменьшении dpr шрифт был такой же как и размер показано в проекте дизайна. Размер, отображаемый на разных мобильных телефонах, также одинаков.
Обработка под экран Retina и адаптация телефона Android
Как видно из кода flexible.js, гибкая верстка адаптирована только для iPhone, а все Android-устройства по умолчанию вынуждены устанавливать dpr равным 1.
Поэтому по этой причине у многих мелких партнеров могут возникнуть такие проблемы:Почему Android не использует экран Retina, нет ли проблемы размытия под Android?
вообще-то нет,Неопределенный характер из-за dpr, да и dpr разных устройств андроид телефонов тоже разный. Другими словами, под Android-телефоном также наблюдается размытая ситуация. Просто его экран не называется retina screen, такого названия нет, поэтому многие друзья ошибочно полагают, что у телефонов Android нет этой проблемы.
Итак, снова возникает вопрос? Так как есть и непонятные проблемы, то почему телефоны на Android не адаптируются?
Проблема вот в чем.Заинтересованные друзья могут глянуть телефоны на Андроиде в Большом Китае.Там разные параметры dpr,от 1 до 4,и даже странные цифры типа 1.75 и 2.75,так что я думаю тут все четко и просто."Примерно " Установка всех телефонов Android на 1 является более эффективным и выгодным подходом.
Конечно, некоторые люди улучшили flexible.js, который предназначен для адаптации телефонов Android с обычным dpr, то есть адаптации только к устройствам Android, чей dpr является целым числом. Не обращайте внимания на эти странные устройства с dpr 1,75. Добиться этого несложно, а заинтересованные друзья могут попробовать.
Отзывчивый и адаптивный выбор
Наконец, в Интернете есть различные объяснения разницы между отзывчивым и адаптивным.
Лично я не считаю нужным так усложнять.Есть друг на Жиху, который сказал на просторечии:
Адаптивный дизайн — это адаптивный дизайн для устройств с разными разрешениями, использующий правила @media в качестве основного средства, в то время как адаптивный игнорирует @media и фокусируется на пропорциональном макете, чтобы адаптироваться к разным размерам окон браузера.
Таким образом, мы обнаружим, что современные крупные веб-сайты, такие как Taobao.com, больше не отвечают. Что это значит?
Мы обнаружим, что на мобильных телефонах и веб-страницах Taobao используются два доменных имени, то есть разные клиенты больше не используют один и тот же набор структур DOM. Скорее, он дифференцирован, чтобы сделать адаптивным. Затем каждый раз, когда пользователь посещает сайт, он перенаправляется в зависимости от типа клиента.
Зачем?
Представьте себе большой веб-сайт, такой как Taobao, на одной странице которого много товарных позиций, и структура DOM каждой позиции очень сложная, и на стороне ПК часто отображается больше информации, чем на мобильном терминале. Если не делать два набора отдельно, а использовать сразу адаптивный тип, то многие DOM, отображаемые на стороне ПК, будут скрыты на стороне мобильного телефона, в результате эти DOM не используются, а загружаются. В эту эпоху, когда трафик и скорость имеют первостепенное значение, давайте не будем говорить об избыточности кода, трафик, потребляемый этими бесполезными кодами, загруженными больше, в некотором смысле, потерял много преимуществ.
Это все для этой статьи.
В статье есть ссылки, и ссылки для ознакомления будут размещены здесь.
Опыт и знания предшественников очень ценны, а нам нужно встать на плечи гигантов, усовершенствовать эти вещи и иметь лучшее понимание, мышление и новые знания.
Ссылки по теме:
Схема адаптации мобильного терминала (в основном объясняющая знание области просмотра мобильного терминала):
segmentfault.com/a/11...
segmentfault.com/a/11...
Происхождение размытия под экраном Retina:
mobile.51cto.com/web-4...
Макет Hand Tao flexible.js:
www.w3cplus.com/mobile...