окно просмотра и 1px | инструментщик: это 1px, дизайнер: нет, это не

JavaScript

новое хранилище знанийПередняя часть от входа до входаПросите внимания, помечайте звездочками и предложениями и время от времени обновляйте~

Эпизоды, которые вы не видели:Большое путешествие по построению фундамента с нуля (подробное объяснение, постоянное обновление~)
Поставьте лайк, если считаете, что это хорошо~

В настоящее время все больше и больше проектов выполняются на нескольких терминалах, а дизайнеры предъявляют все более высокие требования к пользовательскому интерфейсу.

Дизайнер: У вас неправильный размер шрифта

Инструментарий: Посмотрите на код, он 16 пикселей.

Дизайнер: Это действительно не соответствует проекту дизайна (выньте iphone 11 max)

Инструментарий: Я вообще эту ситуацию называю бедами богатых (выньте 5-дюймовый андроид)

Дизайнер: Хорошо

Пожалуйста, простите человека с инструментами.

существует高清屏Кроме того, многие параметры проекта дизайна нельзя использовать напрямую, как в Интернете.Будь то страница H5 или приложение RN, их необходимо адаптировать. Например, если это также 1 пиксель, 1 пиксель на мобильной стороне будет казаться очень толстым.

причина

Так почему возникает эта проблема? В основном это связано с одной вещью, соотношением пикселей устройства DPR (devicePixelRatio), которое представляет собой отношение пикселей устройства к пикселям CSS, когда масштаб по умолчанию равен 100%. Проще говоря, это сообщает браузеру, сколько фактических пикселей экрана должно использоваться для отрисовки одного пикселя CSS.

Есть еще один фактор, который также вызывает изменения пикселей в CSS, и это масштабирование пользователя. Например, когда пользователь удваивает размер страницы, физические пиксели, представленные 1 пикселем в CSS, также удваиваются; и наоборот, если страница удваивается, физические пиксели, представленные 1 пикселем в CSS, также удваиваются.

value = window.devicePixelRatio;

В более ранних мобильных устройствах плотность пикселей экрана была относительно низкой, например, iphone3, его разрешение было 320x480, на iphone3 один пиксель CSS действительно равен одному физическому пикселю экрана. Позже, с развитием технологий, плотность пикселей экрана мобильных устройств становилась все выше и выше.Начиная с iphone4, Apple запустила так называемый экран Retina, который удвоил разрешение до 640x960, но размер экрана не изменился. означает, что на экране того же размера количество пикселей удваивается.В настоящее время один пиксель CSS равен двум физическим пикселям.

решение:

Решено с 0,5 шт

Так как 1px представляет 2 пикселя, которые не используют 0,5px, чтобы улучшить его.

На конференции WWDC была дана схема 1px.Когда написано 0.5px будет отображаться граница с физической шириной пикселя.

Браузеры с экранами Retina могут не распознать границу в 0,5 пикселей и интерпретировать ее как 0 пикселей без рамки. Включает iOS 7 и более ранние версии, OS X Mavericks и более ранние версии, а также устройства Android.

Используйте JavaScript, чтобы определить, может ли браузер обрабатывать границы в 0,5 пикселя, и если да, дайте<html>элемент для добавленияclass.

if (window.devicePixelRatio && devicePixelRatio >= 2) {
  var testElem = document.createElement('div');
  testElem.style.border = '.5px solid transparent';
  document.body.appendChild(testElem);
  if (testElem.offsetHeight == 1)
  {
    document.querySelector('html').classList.add('hairlines');
  }
  document.body.removeChild(testElem);
}

Затем очень тонкие стили границ просты:

div {
  border: 1px solid #bbb;
}
 
.hairlines div {
  border-width: 0.5px;
}

Кстати, ступая на другие решения. оригинал:

unlike previous solutions involving SVG or GIF or transforms or linear-gradient1, you can have retina hairlines on elements with rounded corners (border-radius).

Для неподдерживаемых устройств:

Это поддерживается большинством настольных браузеров, а теперь и Safari 8 на iOS и OS X. Chrome на Android заметно отсутствует, но, без сомнения, в конечном итоге он последует этому примеру. обычная граница.

Вот три способа презирать

Используйте картинки для достижения

Картинка 6х6

Вы можете использовать изображения в формате gif, png или base64.

.border{
    border-width: 1px;
    border-image: url(border.gif) 2 repeat;
}

Недостаток в том, что не очень удобно менять картинку при смене цвета границы.

Реализовано с несколькими фоновыми градиентами

Установите градиентный фон 1px, 50% цветной, 50% прозрачный, но не можете получить закругленные углы

.border {
    background:
    linear-gradient(180deg, black, black 50%, transparent 50%) top    left  / 100% 1px no-repeat,
    linear-gradient(90deg,  black, black 50%, transparent 50%) top    right / 1px 100% no-repeat,
    linear-gradient(0,      black, black 50%, transparent 50%) bottom right / 100% 1px no-repeat,
    linear-gradient(-90deg, black, black 50%, transparent 50%) bottom left  / 1px 100% no-repeat;
}

Псевдокласс + преобразование

Объедините код JS, чтобы определить, поддерживает ли экран Retina

if(window.devicePixelRatio && devicePixelRatio >= 2){
    document.querySelector('ul').className = 'hairlines';
}

Удалите границу исходного элемента, а затем используйте:beforeили:afterПовторите границу и уменьшите масштаб преобразования вдвое. Относительное позиционирование исходного элемента, абсолютное позиционирование новой границы

Если это верхняя и нижняя границы, scaleY устанавливается равным 0,5, а левая и правая границы scaleX устанавливается равным 0,5.

.hairlines li{
    position: relative;
    border:none;
}
.hairlines li:after{
    content: '';
    position: absolute;
    left: 0;
    background: #000;
    width: 100%;
    height: 1px;
    -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
}

Может поддерживать закругленные углы, но<td>Не могу его использовать.

Вышеприведенные три метода аналогичны первому, поскольку один CSS-пиксель представляет собой два физических пикселя, устройство его не распознает.0.5px, затем нарисуйте 1px, а затем старайтесь всеми способами уменьшить ширину линии вдвое.

Реализовано через viewport + rem

var viewport = document.querySelector("meta[name=viewport]");

//下面是根据设备像素设置viewport
if (window.devicePixelRatio == 1) {
  viewport.setAttribute('content', 'width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no');
}
if (window.devicePixelRatio == 2) {
  viewport.setAttribute('content', 'width=device-width,initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no');
}
if (window.devicePixelRatio == 3) {
  viewport.setAttribute('content', 'width=device-width,initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no');
}

// 设置对应viewport的rem基准值
var docEl = document.documentElement;
var fontsize = 16* (docEl.clientWidth / 375) + 'px';
docEl.style.fontSize = fontsize;

Когда дело доходит до вьюпорта, мы должны поговорить об этом подробно.

Следующее содержание взято из справочного документа 4

Три типа видового экрана

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

Чтобы правильно отображать веб-сайты, которые традиционно предназначены для настольных браузеров, на мобильных устройствах, браузеры на мобильных устройствах будут устанавливать размер области просмотра по умолчанию на 980 пикселей или 1024 пикселей. Но следствием этого является то, что браузер будет иметь горизонтальную полосу прокрутки. Мы называем область просмотра по умолчанию этого браузера какlayout viewport,пройти черезdocument.documentElement.clientWidthполучить

1 пиксель CSS в настольных браузерах часто соответствует 1 физическому пикселю экрана компьютера, но пиксель в CSS — это просто абстрактная единица.На разных устройствах или в разных средах 1 пиксель в CSS представляет собой физические пиксели устройств.

Сейчас есть много мобильных телефонов с очень большими разрешениями, например 768x1024 или 1080x1920. Но 1px в css не соответствует 1px на экране.Чем больше ваше разрешение, тем больше физических пикселей представлено 1px в css, и тем больше значение devicePixelRatio. Поскольку ваше разрешение увеличилось, но размер экрана не сильно увеличился, вы должны позволить 1px в CSS представлять больше физических пикселей, чтобы размер 1px на экране был подобен размерам устройств с низким разрешением, иначе он слишком мал для видеть ясно.

Вызов размера окна просмотра, который представляет видимую область браузераvisual viewport. Ширина визуального окна просмотра может быть указана с помощьюwindow.innerWidthчтобы получить.

Наконец, есть окно просмотра, которое отлично работает на мобильных устройствах. Так называемая идеальная посадка означает,

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

Это окно просмотра называетсяideal viewport, который является третьим окном просмотра — идеальным окном просмотра для мобильных устройств.

метатег

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

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

Роль мета-тегов состоит в том, чтобы позволить текущую ширину просмотра просмотра, равной ширине устройства, не позволяя пользователю вручную масштабировать.

Meta Viewport имеет 6 атрибутов:

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

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

На iphone и ipad установить толькоcontent="width=device-width", будь то книжная или альбомная, ширина — это ширина идеального окна просмотра в портретной ориентации.

<meta name="viewport" content="initial-scale=1">

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

Увеличение относительно идеального окна просмотра Когда идеальное окно просмотра увеличивается на 100%, то есть когда значение масштабирования равно 1, получается идеальное окно просмотра. Таким образом, начальная шкала по умолчанию не равна 1.

установить толькоcontent="initial-scale=1", телефон, ipad и IE не различают горизонтальный и вертикальный экраны, и идеальная ширина области просмотра вертикального экрана должна превалировать. Рекомендуется писать оба

Увеличение относительно идеального окна просмотра. Чем больше значение масштабирования, тем меньше ширина текущего окна просмотра, и наоборот. Например, в iphone ширина идеального окна просмотра составляет 320 пикселей, если мы установим initial-scale=2, то ширина окна просмотра станет всего 160 пикселей.

Масштабирование в 2 раза — это когда фактическая ширина остается неизменной, а 1 пиксель становится той же длины, что и исходные 2 пикселя, поэтому после 2-кратного масштабирования ширина, которая раньше требовала 320 пикселей для заполнения, теперь требует только 160 пикселей.

visual viewport宽度 = ideal viewport宽度  / 当前缩放值

Хорошо, теперь вернемся к проблеме с 1px.

У каждого браузера мобильного устройства есть идеальная ширина. Эта идеальная ширина относится к ширине в CSS, которая не имеет ничего общего с физической шириной устройства. В CSS эта ширина эквивалентна ширине, представленной 100%. Мы можем использовать метатег, чтобы установить идеальную ширину области просмотра.Если мы не знаем, какова идеальная ширина устройства, тогда используйте специальное значение ширины устройства.

Например, идеальная ширина области просмотра телефона с разрешением 320x480 составляет 320 пикселей, а идеальная ширина области просмотра другого телефона с таким же размером экрана, но с разрешением 640x960, также составляет 320 пикселей. Но для последнего 1 пиксель css будет отображаться с 2 физическими пикселями.

Следовательно, дляwindow.devicePixelRatio = 2экран, установив

viewport.setAttribute('content', 'width=device-width,initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no');

Измените 1px на исходные 0,5px, чтобы 1px в CSS соответствовал 1px на экране.

Напротив, если исходные 320 пикселей могут заполнить экран, теперь для заполнения экрана требуется 640 пикселей, поэтому при изменении области просмотра он будет синхронно использовать rem в качестве единицы пикселя. Поскольку rem является относительным размером, он связан только с корневым элементом.font-sizeзначение

Связанные серии:Большое путешествие по построению фундамента с нуля (подробное объяснение, постоянное обновление~)

Рекомендуемое чтение:

если вы получитеновые знания, или собранныйкрасивая картинка слева, Пожалуйста, нажмитеотличныйЭто ~

Справочная документация:
  1. 1px решение для мобильных устройств
  2. CSS retina hairline, the easy way.
  3. Как мобильные устройства с экранами Retina достигают настоящих линий в 1 пиксель?
  4. Глубокое понимание области просмотра и devicePixelRatio для разработки мобильных интерфейсов.
Категории