Адаптация мобильного терминала - базовые знания

Это цикл статей в 3-х частях:

• Адаптация мобильного терминала - базовые знанияИз этой статьи вы узнаете, почему возникают проблемы с адаптацией мобильного терминала.
  
• Адаптация мобильного терминала - практикаКак шаг за шагом решить проблемы с изображением высокой четкости, рамкой 1px, адаптацией макета и адаптацией контента
  
• Адаптация мобильного терминала - Rem LayoutКраткая версия двух предыдущих
  

единица измерения

Единицы в CSS

Относительная единица

размер шрифта	иллюстрировать
rem	размер шрифта относительно корневого элемента (элемент html)
em	Вычисленное значение относительно размера шрифта элемента
ex	Высота нижнего регистра x относительно шрифта элемента
ch	Ширина относительно глифа "0" в шрифте элемента

связанный с областью просмотра	иллюстрировать
vw	относительно ширины области просмотра1vw = window.innerWidth * 1%
vh	относительно высоты области просмотра1vw = window.innerHeight * 1%
vmin	меньшее значение vw и vh
vmax	Большее значение vw и vh

window.innerHeightViewport (визуальное окно просмотра) высота (единица измерения: пиксели, размер — количество пикселей css) окна браузера, включая горизонтальные полосы прокрутки.

window.innerWidthШирина окна просмотра браузера (визуального окна просмотра) (единица измерения: пиксели, размер — количество пикселей css), включая вертикальные полосы прокрутки.

абсолютная единица

• px
  • Связано с экраном устройства
  • Для обычных экранов обычно используется один пиксель устройства (точка) дисплея.
  • Для принтеров или экранов с высоким разрешением один пиксель CSS соответствует нескольким пикселям устройства.

Единицы в Android

• dp
  • Единица виртуального пикселя, используемая при определении макетов пользовательского интерфейса для представления размеров или позиций макета независимым от плотности способом.
  • 1dp = 1 физический пиксель на экране с разрешением 160 dpi.
  • Вы всегда должны использовать единицы dp при определении пользовательского интерфейса вашего приложения, чтобы гарантировать правильное отображение пользовательского интерфейса на экранах с различной плотностью.
• sp
• px

юнит в ios

• pt
• px

Ссылаться на

• Поддержка нескольких экранов Android
• CSS Values and Units Level 3
• CSS-значения и единицы

пиксель

пиксель устройства (физический пиксель)

Также известное устройство пикселей物理像素(физический пиксель) — это наименьшая физическая единица на дисплее, наименьшая единица, которой устройство может управлять дисплеем. Каждый пиксель устанавливает свой собственный цвет и яркость в соответствии с инструкциями операционной системы.

Количество физических пикселей для любого устройства фиксировано.

DIP, не зависящий от устройства

Виртуальные пиксели, используемые и контролируемые программами, например CSS-пиксели (px) в веб-программировании, аппаратно-независимые пиксели в Android (dp) и ios (pt).

CSS-пиксели

Пиксель CSS - это концепция в веб-программировании, а браузер использует абстрактное устройство. Как правило, пиксель CSS называется пикселями (Dip), не зависящим от устройства. На стандартном дисплее плотности один CSS пиксель соответствует 1 приборам пикселей.

Например:

<div height="200" width="300"></div>

Чтобы отобразить 200x300 пикселей устройства на обычном экране, чтобы обеспечить такой же физический размер на дисплее Retina, один и тот же элемент div будет использовать 400x600 пикселей устройства, поэтому на дисплее Retina одна и та же физическая поверхность имеет четыре пикселя устройства обычного дисплея. .

Пиксели устройства и пиксели, независимые от устройства

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

Количество пикселей устройства, эквивалентное пикселю CSS, определяется характеристиками экрана (высокая плотность или нет) и масштабированием. Чем больше вы увеличиваете масштаб, тем больше пикселей устройства покрывает один пиксель CSS.

разрешение

Количество физических пикселей, которые может отображать монитор. Чем больше пикселей может отображать монитор, тем четче изображение.

Плотность экрана

Плотность пикселей экрана — это количество пикселей на физической поверхности, обычно измеряемое в пикселях на дюйм (PPI, пиксель на дюйм). Чем выше значение ppi, тем лучше качество изображения.

Apple придумала маркетинговый термин «Retina» для своих дисплеев с двойной плотностью, утверждая, что человеческий глаз больше не может различать отдельные пиксели на экране с «естественного» расстояния просмотра.

Чтобы рассчитать плотность пикселей экрана (пикселей на дюйм) монитора, сначала определите размер и разрешение экрана.

Например, iphone6s от Apple, разрешение в пикселях: 1334 x 750, длина по диагонали 4,7 дюйма.

Тогда плотность пикселей экрана равна:

Apple считает, что самая высокая плотность пикселей, которую люди могут распознать невооруженным глазом, составляет 300 пикселей на дюйм.

Также появляется все больше и больше телефонов Android (дисплеев) с высоким разрешением, которые имеют тот же дисплей Retina, что и iPhone от Apple.
По разнице в количестве пикселей на дюйм экрана разработчики системы Android делят экраны планшетов и мобильных телефонов на пять категорий:

имя	показать уровень	пикселей на дюйм	Классификация устройств ios с похожим ppi
LDPI @0.75x	низкая плотность пикселей	около 120 пикселей на дюйм
MDPI @1x	средняя плотность пикселей	около 160 пикселей на дюйм	Стандартная точка@1x
HDPI @1.5x	высокая плотность пикселей	около 180 пикселей на дюйм
XHDPI @2x	Очень высокая плотность пикселей	около 320 пикселей на дюйм	Сетчатка @2x
XXHDPI @3x	Сверхвысокая плотность пикселей	около 480 пикселей на дюйм	HD Retina @3x

соотношение пикселей устройства dpr

• Отношение физического разрешения в пикселях к разрешению в пикселях CSS при коэффициенте масштабирования 1
• В js вы можете пройтиwindow.devicePixelRatioполучить, также можно переопределитьwindow.devicePixelRatioизменить дпр
• Устройство-пиксельное соотношение медиа-запросов можно использовать в css

Растровый пиксель

位图像素Это наименьшая единица в растровых изображениях (JPG, PNG, GIF).Каждый пиксель содержит отображаемую на экране информацию, такую ​​как положение, цвет и т. д., а некоторая информация об изображении также содержит непрозрачность (альфа-канал).

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

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

Обычный способ предоставления изображений для экранов Retina — программно уменьшить размер контейнера изображения вдвое с помощью HTML или CSS.

Например, чтобы отобразить изображение размером 200 x 300 пикселей (то есть CSS-пиксели), вы можете запросить у сервера изображение с растровым разрешением 400 x 600 пикселей (4x).

<img src="https://img.meituan.net/beautyimg/0e03672ea40f4f692f193349b86aeb90299167.jpg%40400w_600h_1e_1c_1l_100q%7Cwatermark%3D0"/>

img{
	width:200px;
	height: 300px;
}

Этотв дисплеях стандартной плотностиНа下采样процесс. Для отображения растрового изображения размером 400x600 пикселей на устройстве размером 200x300 пикселей его необходимо уменьшить в 2 раза, в результате чего получится изображение с разрешением (400/2) x (600/2). То есть фактически превратить пиксели растрового изображения в окне 2 x 2 в пиксель, а значение этого пикселя является средним значением всех пикселей в окне.

Принцип понижения разрешения изображения

Для изображения I размера M_N уменьшите его разрешение в s раз, то есть для получения изображения с разрешением размером (M/s)_(N/s), разумеется, s должно быть общим делителем M и N. Если вы рассматриваете изображение в матричной форме, это преобразование изображения в окне s*s исходного изображения в пиксель. Значение этого пикселя является средним значением всех пикселей в окне: pk = ∑i∈win(k)Ii / s2

Принцип повышения частоты дискретизации изображения

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

Чтобы иметь возможность отображать изображение в высоком разрешении на дисплее Retina, необходимо загрузить изображение в 2 раза больше. Но для стандартных устройств отображения, если вы также используете изображение 2x, возникнет несколько проблем:

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

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

Проблема с отображением мобильного изображения высокой четкости

Медиа-запросы CSS работают с фоновым изображением

Изображения с разным разрешением могут использоваться для разных устройств dpr с помощью медиа-запросов.

.icon {
  background-image: url(example.png);
  background-size: 200px 300px;
  height: 300px;
  width: 200px;
}

@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
  .icon {
    background-image: url(example@2x.png);
  }
}

В запросе dpr используется 1,5 вместо 2, и тот же оператор можно использовать для запроса других устройств, отличных от Apple.
Этот метод в основном используется для изображений, отображаемых с помощью свойства background-image.

преимущество

• Устройство загружает только подходящие целевые ресурсы
• Кроссбраузерная совместимость
• Точное управление пикселями

недостаток

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

js для загрузки изображений нужного размера

Dpr можно запросить в Javascript с помощью window.devicePixelRatio, что упрощает установку изображения, чем CSS. Однако рендеринг может задерживаться из-за использования JavaScript.

$(document).ready(function(){
  if (window.devicePixelRatio > 1) {
    var images = $('img');

    images.each(function(i) {
      var lowres = $(this).attr('src');
      var highres = lowres.replace(".", "@2x.");
      $(this).attr('src', highres);
    });
  }
});

Этот метод больше подходит для отображения изображений на основе контента.

преимущество

• Легко реализовать
• Устройствам без Retina не нужно загружать большие ресурсы изображений
• Точное управление пикселями

недостаток

• Устройства Retina должны загружать изображения 1x и 2x.
• Эффект замены изображения работает на устройствах Retina
• window.devicePixelRatio не поддерживает IE или Firefox.

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

• Масштабируемая векторная графика SVG
  Независимо от используемого метода растровые изображения ограничены разрешением растрового изображения и не могут масштабироваться бесконечно. Но бесконечное масштабирование векторной графики не повлияет на резкость

<img src="sample.svg" width="300" height="200" />

• Значок Шрифта Значок Шрифты

Ссылаться на

• Википедия - пикселей на дюйм
• точек на дюйм
• совместимость браузера devicePixelRatio
• Towards A Retina Web
• Масштабирование изображения
• Редактор уравнений MathML

Область просмотра

В настольных браузерах есть только одно окно просмотра, ширина окна просмотра = ширине окна браузера. На мобильных устройствах с небольшими экранами (шириной от 240 до 640 пикселей), если ширина области просмотра совпадает с шириной браузера, веб-страницы, предназначенные для настольных браузеров, будут выглядеть некрасиво при просмотре на мобильных терминалах, поэтому производители мобильных браузеров устанавливают Ширина области просмотра мобильных устройств составляет от 768 до 1024 пикселей, наиболее распространенная ширина составляет 980 пикселей.

видовой экран макета

Макет CSS будет рассчитываться на основе области просмотра, описанной выше, поэтому на мобильной стороне это называется布局视口.

визуальное окно просмотра

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

идеальное окно просмотра

Для мобильных веб-страниц ширина окна просмотра макета по умолчанию не является идеальной шириной. Нам не нужно увеличивать масштаб для просмотра содержимого, поэтому производители браузеров ввели理想视口Концепция веб-страницы с той же шириной, что и идеальная область просмотра, — это идеальная ширина для просмотра пользователями, и пользователям не нужно увеличивать масштаб при первом входе на страницу.

Для мобильных веб-страниц нам нужно установить ширину области просмотра макета на ширину идеальной области просмотра. Это должно быть объявлено в метатеге:

<meta name="viewport" content="width=device-width"/>

Ссылаться на

• Мобильная веб-брошюра

метатег

Выше было упомянуто, что ширина области просмотра макета задается через метатег.
Общие атрибуты метатегов:

Атрибуты	необязательное значение	описывать
charset	UTF-8 и т.д.	Объявить кодировку символов, используемую текущим документом
name	автор, описание, ключевые слова, область просмотра и т. д.	Свяжите свойство содержимого с именем
http-equiv	тип содержимого, срок действия, обновление, набор файлов cookie	Свяжите атрибут содержимого с заголовком HTTP
content	Метаинформация, относящаяся к атрибуту имени, формат: ключ=значение	Определить метаинформацию, связанную с http-equiv или атрибутом имени

Для формата метатега видового экрана:

<meta name="viewport" content="key=value, key=value"/>

Содержание которого:

• width: ширина области просмотра макета (числовая / ширина устройства) (диапазон от 200 до 10 000, по умолчанию 980 пикселей)
• height: высота области просмотра макета (числовая / высота устройства) (диапазон от 223 до 10 000)
• initial-scale: начальный коэффициент масштабирования (в диапазоне от > 0 до 10)
• minimum-scale: минимальный масштаб, до которого пользователю разрешено масштабировать
• maximum-scale: максимальный масштаб, до которого пользователю разрешено масштабировать
• user-scalable: Может ли пользователь сжимать вручную (нет, да)

Для мобильных страниц обычно устанавливается идеальная ширина области просмотра макета и отключается масштабирование:

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

Ссылаться на

• Метатеги MDN

запросы средств массовой информации

Тип медиа-запроса

• запрос типа носителя
• Зависит от области просмотра
• функция, связанная

грамматика

@media 媒体类型 and (视口特性阀值){
    // 满足条件的css样式代码
}

Пример медиа-запроса

.sample {
    background-image: url(sample.png);
    width: 300px;
    height: 200px;
}
 
@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
  only screen and (-moz-min-device-pixel-ratio: 1.5),
  only screen and (-o-min-device-pixel-ratio: 3/2),
  only screen and (min-device-pixel-ratio: 1.5) {
    .sample {
        background-image: url(sample@2x.png);
    }
}

Дополнительные ссылки на использование

• W3C Введение в медиа-запросы
• Стандарт медиазапросов W3C

---

Есть ли выигрыш? видеть это?Дикая история модульности JavaScript, о которой вы могли не знать