1. Получить реальное разрешение разработки (логическое разрешение) устройства
Недавно я проверил много информации об адаптации мобильного терминала, и люди были ошеломлены, я набрал много существительных:
CSS像素、物理分辨率、逻辑分辨率、设备像素比、PPI、DPI、DPR、DIP、Viewport
На самом деле для развития нужно понимать всего три понятия.
- Физическое разрешение — это номинальное разрешение устройства.
- Логическое разрешение, разрешение, используемое во время разработки.
- Соотношение пикселей устройства, соотношение физического разрешения и логического разрешения.
Например iphone 6, его физическое разрешение750 x 1334, логическое решение375 x 667, соотношение пикселей устройства равно 2 (750 / 375). Откройте консоль Chrome, переключитесь на панель инструментов устройства и выберите устройство iphone 6, чтобы увидеть его логическое разрешение.
Обычно черновик дизайна пользовательского интерфейса составляет 2x и 3x. Этот множитель относится к соотношению пикселей устройства. Например, черновик дизайна в 2 раза больше изображения, а шрифт внутри 24 px, тогда используем24 / 2Можно сделать вывод, что пиксели, используемые для разработки, составляют 12 пикселей.
Большинство устройств Apple могут определить свое логическое разрешение. Но устройств Android нет, поэтому необходимо использовать другие средства.
Знайте физическое разрешение
Если вы знаете физическое разрешение, это можно сделать с помощьюwindow.devicePixelRatioПолучите соотношение пикселей устройства. Затем логическое решение получается с помощью формулы.
逻辑分辨率 = 物理分辨率 / 设备像素比
Например, соотношение пикселей устройства на ПК равно 1.
Разработать страницу для ПК очень просто, количество пикселей на дизайн-проекте столько же, сколько и на разработке.
ничего не знаю
Даже если вы даже не знаете физического разрешения, не беда, есть способы получить логическое разрешение устройства.
Создайте элемент div, который просто заполняет весь экран страницы, а затем получите его ширину и высоту, которые являются логическим разрешением устройства.
.test-div {
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
}
document.querySelector('test-div').clientWidth // 宽
document.querySelector('test-div').clientHeight // 高
Бывает, что у меня есть планшет Huawei m5 и планшет Huawei m5pro, размеры 10,1 дюйма и 10,8 дюйма соответственно, и их логические разрешения, полученные этим методом, равны960 x 600,1024 x 640.
Как показано на картинке (Huawei m5):
Чтобы доказать правильность вывода, я взял приложение, специально используемое на m5pro, и запустил его на хроме (имитируя логическое разрешение устройства), которое идеально подходит.
почему бы не использоватьwindow.screen.widthилиwindow.screen.heightчтобы получить логическое решение? См. объяснение MDN:
Обратите внимание, что не все значения высоты, возвращаемые этим свойством, доступны в окне браузера. Виджеты, такие как панель задач или окна других специальных программ, могут уменьшить пространство, доступное для окон браузера и других приложений.
То есть часть возвращаемой высоты может быть занята другими программами.
PS: если приложение не нужно отображать в полноэкранном режиме на мобильных устройствах, вычтите высоту строки состояния устройства при имитации размера устройства в хроме.
2. Адаптация страницы
В css много относительных длин, среди которых обычно используются em, rem, vw, vh и т.д., а также есть rpx на апплете. Будь то rem, vw или rpx, это связано с шириной экрана. Страницы, разработанные с использованием этих единиц измерения, могут быть совместимы не со всеми мобильными устройствами.
Например, страница, идеально подходящая для iphone 6, может иметь проблемы со стилем на планшете.
страница для айфона:
Положи под планшет и стиль испортится:
С этой целью некоторые веб-сайты превращаются в адаптивные веб-сайты с несколькими наборами стилей. Например, стили веб-сайтов, к которым обращаются с мобильных телефонов, планшетов и ПК, различаются. Однако обслуживание такого сайта очень трудоемко и обременительно. А сейчас разница между мобильником и мобильником тоже очень большая, нужно много писать@mediaрешить проблему адаптации.
работоспособное решение
Я думаю, что есть более приемлемое решение, которое полезно для адаптации к различным мобильным устройствам.
То естьВ общем макете в качестве единиц измерения используются vw, проценты в процентах, а в стиле содержимого в качестве единиц измерения используются px..
Как видно из трех приведенных выше рисунков, использование пикселей в качестве единицы измерения стиля контента может быть адаптировано для нескольких целей. Даже веб-сайты, написанные для мобильных устройств, можно адаптировать для ПК.
Это решение простое и удобное, раз и навсегда. В настоящее время все разработанные мной проекты мобильных терминалов используют это решение, и я пока не сталкивался с проблемами адаптации.
И есть еще одно преимущество написания таким образом, а именноБольшой экран для просмотра большего количества контента, а не для просмотра большего контента. Например, под мобильным телефоном в строке может отображаться только X символов, если содержимое выходит за пределы экрана, его необходимо заменить многоточием. Если вы замените его на планшет, вы сможете отображать содержимое целиком.
другие решения
Другое решение в этомВеб-сайтнашел. В общем макете и содержании этого веб-сайта в качестве единицы измерения используется vw, что хорошо для мобильных устройств. Но на стороне ПК он используетscaleАтрибуты. То есть, когда он обнаруживает, что ваше устройство является ПК, он используетscaleСделать сайт меньше, максимальная ширина фиксирована на750px. Таким образом, даже если стили содержимого используют vw в качестве единицы измерения, беспорядка не будет.
Растровый макет
В некоторых случаях можно использовать растровый макет. Например, при большом разрешении страницы используется трехколоночный макет, а при малом — двухколоночный.
<div class="container">
<div class="col col-md-4 col-sm-6"></div>
<div class="col col-md-4 col-sm-6"></div>
<div class="col col-md-4 col-sm-12"></div>
<div class="col col-md-3 col-sm-3"></div>
<div class="col col-md-6 col-sm-6"></div>
<div class="col col-md-3 col-sm-3"></div>
<div class="col col-md-1 col-sm-2"></div>
<div class="col col-md-1 col-sm-2"></div>
<div class="col col-md-2 col-sm-8"></div>
<div class="col col-md-2 col-sm-3"></div>
<div class="col col-md-6 col-sm-3"></div>
</div>
Страница с большим разрешением:
Страницы с меньшим разрешением:
Если вы мало что знаете о принципе растеризации, предлагаю прочитать другую мою статьюПринцип и реализация системы растеризации.
Попробуйте использовать библиотеку компонентов пользовательского интерфейса для мобильных устройств.
Библиотека компонентов пользовательского интерфейса на стороне ПК будет иметь много проблем со стилем на стороне мобильных устройств.Если в ней нет необходимости, не используйте ее.