В последнее время проект мобильного терминала компании реконструируется.Помимо построения стека передовых технологий для нового проекта, важным вопросом, который необходимо рассмотреть, является адаптация мобильного терминала.Мое понимание адаптации мобильного терминала всегда был в этом довольно туманном состоянии (знаю это, но не знаю почему), поэтому недавно я провел дополнительное исследование, и я расскажу о своем понимании адаптации мобильных терминалов в этом сообщении в блоге.
В этом сообщении блога я сначала объясню некоторые основные понятия мобильных устройств, включая независимые от устройства пиксели, соотношение пикселей устройства и область просмотра, а затем подробно объясню мобильную адаптацию на этой основе и, наконец, рассмотрю решения, удобные для мобильных устройств.
Независимые от устройства пиксели (dip), соотношение пикселей устройства (dpr)
Сначала давайте взглянем на различные концепции мобильных устройств:
- пиксель устройства: то есть физический пиксель, который относится к наименьшей единице, которой устройство может управлять дисплеем, то есть к пикселям на экране дисплея.
- Размер экрана: Относится к длине диагонали экрана в дюймах, 1 дюйм = 2,54 см.
- Разрешение экрана: Относится к количеству физических пикселей на экране мобильного телефона, обычно выражаемому как «физические пиксели по вертикали * физические пиксели по горизонтали». Например, разрешение экрана iphone 6 составляет 1334*750.
- Плотность пикселей экрана (dpi/ppi): количество физических пикселей на дюйм на экране телефона. Его значение связано с разрешением и размером экрана.Формула расчета: dpi = √(вертикальные физические пиксели² + горизонтальные физические пиксели²) / размер экрана.
Пиксель, независимый от устройства (dip), также известный как логический пиксель, независимый от плотности пиксель, относится к независимой от устройства единице для логического измерения пикселей.
Соотношение пикселей устройства (dpr) относится к соотношению физических пикселей к независимым от устройства пикселям.. В программе его можно получить через window.devicePixelRatio.Это свойство доступно только для чтения, но не постоянное.Некоторые операции в браузере изменят это значение.
Так как же получить соотношение пикселей каждого мобильного устройства?
Отношение пикселей устройства к плотности пикселей экрана мобильного устройства связано.Вообще говоря, соотношение пикселей устройства представляет собой целое число, кратное плотности пикселей экрана, деленное на 160, то есть dpr = Math.floor(dpi / 160) = Math.floor(√(вертикальные физические пиксели²+горизонтальные физические пиксели²) / экран размер / 160).
Например, размер iphone 6 составляет 4,7 дюйма, а разрешение экрана — 1334 * 750, тогда мы можем получить соотношение пикселей устройства iphone 6 как: Math.floor(√(1334²+750²) / 4,7/160) = 2 .
Как упоминалось ранее, соотношение пикселей устройства относится к отношению физических пикселей к независимым от устройства пикселям, поэтому, зная соотношение пикселей мобильного устройства, мы можем получить независимый от устройства пиксель мобильного устройства, а именноНезависимые от устройства пиксели = Физические пиксели / Соотношение пикселей устройства.
Если горизонтальное разрешение iphone 6 равно 750, а соотношение пикселей устройства равно 2, то можно получить логическую ширину iphone 6 (То есть ширина мобильного устройства в независимых от устройства пикселях.) составляет 375 пикселей.
viewport
viewprot относится к виртуальному окну в браузере мобильного устройства, в котором размещена страница., окно может быть больше или меньше видимой области мобильного устройства.
Как правило, область просмотра мобильных устройств по умолчанию больше, чем ее видимая область, что не нарушит макет веб-страниц, не оптимизированных для мобильных устройств. Пользователи могут перемещаться и масштабировать, чтобы увидеть другие части веб-страницы. Большинство мобильных устройств имеют окно просмотра по умолчанию 980 пикселей (px здесь относится к независимым от устройства пикселям).
Когда мы рефакторим мобильные страницы, мы часто добавляем следующий код:
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
Этот код устанавливает для области просмотра мобильного устройства логическую ширину устройства с начальным значением масштабирования 1 и максимальным значением масштабирования 1 и не позволяет пользователю масштабировать.
Давайте посмотрим на свойства в области просмотра:
Когда мы устанавливаем ширину в области просмотра на ширину устройства, ширина области просмотра равна логической ширине мобильного устройства, и если мы устанавливаем начальный масштаб равным 1, мы получаем тот же результат. Вообще говоря, мы будем устанавливать эти два свойства одновременно.Когда эти два свойства имеют разные эффекты из-за разных значений, браузер получит большее значение из двух.
Вот пример, помогающий понять, что делает свойство viewport:
<style>
html,body{
margin:0;
padding:0;
}
.box{
width:100px;
height:100px;
background:blue;
}
</style>
<div class="box"></div>
Эффект отладки iphone 6 в Google Chrome выглядит следующим образом:
Можно видеть, что без добавления атрибута области просмотра значение области просмотра по умолчанию в iPhone 6 составляет 980 пикселей.Как упоминалось ранее, это вычисляется с точки зрения аппаратно-независимых пикселей, что совпадает с пикселями, которые мы обычно пишем в код стиля тот же, в коде определен синий блок шириной и высотой 100px, поэтому в горизонтальном виде синий блок занимает 100/980 экрана, как показано на рисунке.
И если мы установим свойство viewport:
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
Эффект следующий:
Видно, что после добавления атрибута viewport ширина области просмотра мобильного устройства устанавливается равной device-width, то есть логической ширине мобильного устройства.В iphone 6 значение device-width равно 375px, поэтому если вы смотрите на него горизонтально, синий блок занимает 100/375 экрана, как показано на рисунке.
Глубокое понимание адаптации мобильного терминала
Мы уже разобрались с некоторыми концепциями независимых от устройства пикселей, соотношения пикселей устройства и области просмотра, поэтому, чтобы глубже понять мобильную адаптацию, нам нужно выяснить, какова роль соотношения пикселей устройства.
Возьмем пример, который проще всего понять. Размер экрана iphone 3 и iphone 4 одинаковый, но разрешение экрана iphone 3 составляет 480 * 320, а разрешение экрана iphone 4 - 960 * 640, горизонтальное и вертикальное разрешение iphone 4 - соответственно горизонтальное и вертикальное разрешение iphone 3 в два раза выше скорости.
Предполагая, что соотношение пикселей устройства iphone 3 и iphone 4 равно 1, их логическая ширина может быть получена как 320px и 640px соответственно.Из примера с атрибутом viewport, добавленным выше, ширина синего блока в iphone 3 составляет 320px и 640px соответственно Соотношение 100/320, а в iphone 4 соотношение 100/640, мы увидим, что один и тот же код отображается очень по разному на разных мобильных устройствах.
И на самом деле соотношение пикселей устройства iphone 3 равно 1, а соотношение пикселей устройства iphone 4 равно 2, поэтому мы можем получить, что их логическая ширина составляет 320 пикселей, поэтому на самом деле синий блок отображается на этих двух разных мобильных устройствах. Размер то же самое.
Таким образом, мы можем сделать вывод, что при использовании единицы пикселей px код одного и того же стиля в основном одинаков в мобильных устройствах с разным разрешением экрана (обратите внимание, что это в основном одно и то же, а не полностью), потому что пиксели устройства в мобильном устройстве Чем преобразовать независимый от устройства пиксель.
И почему говорится, что ситуация, отображаемая на мобильных устройствах с разным разрешением, в основном одинакова, но не полностью согласуется? Это связано с тем, что существует множество мобильных устройств с разными разрешениями экрана, и их логическая ширина не у всех одинакова.
Например, разрешение iphone 6 составляет 1334 * 750, а соотношение пикселей устройства равно 2, поэтому его логическая ширина составляет 375 пикселей.Из примера с добавленным выше атрибутом viewport пропорция синих блоков составляет 100/375, вы можете см. его Пропорция синих блоков на экране отличается от iphone 3 и iphone 4.
Таким образом, мы можем знать, что соотношение пикселей устройства помогает нам в определенной степени адаптироваться к мобильному терминалу. На самом деле нам также необходимо адаптироваться к мобильному терминалу через некоторые другие решения. Фундаментальная причина, по которой нам нужна мобильная адаптация, заключается в том, что существует множество мобильных устройств с разной логической шириной.
Одна из наших конечных целей в мобильной адаптации — сделать ее примерно одинаковой для всех мобильных устройств.(Для приведенного выше примера это делается для того, чтобы соотношение синих блоков на разных мобильных устройствах было одинаковым).
Решение для адаптации мобильного терминала
Наконец, это решение для адаптации мобильного терминала, здесь я хочу«Думая о дизайне интерфейса и рабочем процессе с учетом размера шрифта NetEase и Taobao»Этот пост в блоге — призыв, и он действительно хорошо написан. В этом сообщении в блоге представлены решения для адаптации мобильных терминалов Lagoo, NetEase и Taobao соответственно. Lagoo в определенной степени адаптируется к мобильным устройствам с разным разрешением, устанавливая процентное соотношение стилей. Этот метод подходит для адаптации простых проекты, а NetEase и Taobao используют известные решения, используя для адаптации rem.
Условно говоря, я думаю, что решение NetEase легче понять и использовать на практике, поэтому я также ссылаюсь на решение NetEase в своем проекте по адаптации к мобильным устройствам. Решение для адаптации мобильного терминала Taobao более сложное, и заинтересованная детская обувь может читать и понимать самостоятельно.
Так что же такое рем?rem (размер шрифта корневого элемента), что означает установку размера шрифта в соответствии с размером шрифта корневого элемента.. Как и px, это единица измерения стиля в CSS, которая преобразуется в px в соответствии со значением размера шрифта корневого элемента по формуле: px = rem * html(размер шрифта).
html{
font-size:10px;
}
div{
width:2rem; // 2*10=20px
}
Таким образом, основной идеей нашей реализации адаптации мобильного терминала является:Используйте rem в качестве единицы стиля, чтобы установить значение размера шрифта корневого элемента в соответствии с различными разрешениями мобильных устройств..
Итак, вопрос в том, как разумно установить значение размера шрифта корневого элемента?
Взяв за эталон эскиз дизайна iphone 6, то есть горизонтальное разрешение эскиза дизайна равно 750, а 100 взято за референсное число (то есть при использовании rem и при использовании px разница кратна 100), то мы можем знать, что ширина html 7.5rem (750/100), и мы знаем, что логическая ширина iphone 6 375px, поэтому ширина html тоже 375px, тогда 7.5rem * html(font -size) = 375px, поэтому можно сделать вывод, что html(font-size) = 375/7,5, т.е.html(font-size) = deviceWidth / 7.5.
Установите размер шрифта корневого элемента через js
var deviceWidth = document.documentElement.clientWidth;
document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';
Конечно, здесь есть предпосылка, а именно установка ширины области просмотра на логическую ширину мобильного устройства.
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
Когда deviceWidth больше 750 пикселей, мы должны посетить версию страницы для ПК, поэтому, когда deviceWidth больше 750 пикселей, мы не должны изменять значение размера шрифта корневого элемента. Полный код выглядит следующим образом.
var deviceWidth = document.documentElement.clientWidth;
if(deviceWidth > 750) deviceWidth = 750;
document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';
Чтобы сделать наш стиль письма более совместимым с размером черновика дизайна, мы можем установить функцию преобразования между px и rem с помощью функции sass.
@function pxToRem($num) {
@return ($num/100) * 1rem;
}
Когда в проекте дизайна есть элемент шириной и высотой 100 пикселей, мы можем написать стиль следующим образом.
div{
width:pxToRem(100);
height:pxToRem(100);
}
Также обратите внимание, что для того, чтобы шрифты выглядели более комфортно на мобильных устройствах с разным разрешением, размер должен быть не rem, а px.
Наконец, я резюмирую схему адаптации мобильного терминала, которую использовал в проекте:
- Установите ширину области просмотра на мобильную логическую ширину;
- Используйте js, чтобы установить значение размера шрифта корневого элемента в соответствии с различными разрешениями мобильных устройств, обратите внимание на критическое значение мобильного и ПК;
- Используйте единицы px для шрифтов в стилях и единицы rem для других элементов;
- Используйте функцию в sass, чтобы установить функцию преобразования между px и rem;