В этой статье рассматривается основы модели визуального форматирования. Модель визуального форматирования — это базовая концепция CSS, определяющая алгоритм обработки HTML документа для его визуального представления в браузере.
В этой теме рассмотрим свойства объекта window, которые предназначены для получения внутренних (innerWidth, innerHeight) и внешних (outerWidth, outerHeight) размеров окна, его положения относительно экрана (screenLeft, screenTop) и координат прокрутки страницы (pageXOffset и pageYOffset) в JavaScript.
Существует три вида видовых экранов и три вида пикселей. Только понимая эти концепции, мы можем лучше разрабатывать веб-страницы, адаптированные к устройствам с различным разрешением.
Но чем больше блогов я читаю, тем больше сбиваю с толку эти концепции. То же понятие, о котором говорится в одном блоге, становится другим термином в другом блоге. Чем больше вы его читаете, тем больше оно становится одним. Беспорядок!
В этой статье делается попытка обобщить эти концепции в нескольких блогах и попытаться исправить сложные отношения между этими концепциями. Если есть какие-либо ошибки, пожалуйста, исправьте меня!
Отказ от ответственности: когда я читаю этот блог по следующему адресу в Интернете, я особенно ценю объяснение многих концепций, поэтому я процитирую это содержание в этой статье. Если читатели увидят цитируемый контент без указанного адреса, это из этой статьи Документация, я также хотел бы поблагодарить автора этого блога за четкое объяснение, которое принесло мне огромную пользу! ! ! Извинения: так как я не записал все блоги, которые я прочитал вовремя, я могу перечислить только некоторые адреса блогов в конце статьи. Я прошу прощения перед другими блогами и их авторами, которые читали, но не указали адреса.
Размер окна браузера
Размер сайта должен быть меньше, чем размер экрана, потому что у браузера есть рамка, полосы прокрутки и иногда
другие инструменты, уменьшающие видимую область сайта.
Под какое разрешение делать сайт? Как рассчитать ширину сайта для того, чтоб не появлялся горизонтальный
скроллинг?
У каждого устройства есть несколько характеристик, описывающих его размер:
Пользователь может просматривать сайты на различных устройствах. Ниже приведена статистика устройств просмотра сайтов Яндекс.Метрика на январь 2021 год.
Типы устройств просмотра сайтов
Статистика Яндекс.Метрика
Размеры окон экрана монитора и браузера указаны в пикселях (px).
Различные размеры окон браузера
1.1. Размер экрана
Размер экрана — это ширина и высота всего экрана: монитора (дисплея) или мобильного дисплея.
1.2. Доступный размер экрана
Доступный размер экрана — это ширина и высота активного экрана без панели инструментов операционной системы.
2.1. Размер внешнего окна — это ширина и высота текущего (активного) окна браузера, включая адресную строку, поисковую строку, панель вкладок, открытые боковые панели и прочие панели браузера.
2.2. Размер внутреннего окна — это ширина и высота области просмотра
.
3. Размер веб-страницы
Размер веб-страницы — это ширина и высота отображаемого содержимого (размер загруженной веб-страницы).
Размеры экранов для адаптивной верстки
Схема позиционирования элемента – это один из факторов, от которого будет зависеть расположение на веб-странице.
По умолчанию все HTML элементы, располагаются в (normal flow).
— это основной алгоритм, определяющий то, как элементы должны располагаться на странице. В нормальном потоке следования элементов осуществляется в том порядке, в котором они расположены в HTML коде с учётом их вложенности.
Задание другой схемы позиционирования элементам осуществляется с помощью CSS свойств position и float. Узнать всё об этих схемах позиционирования элементов можно в этой статье.
1 Ширина области просмотра браузера компьютера
Затем мы используем следующий оператор для вывода ширины области просмотра браузера.
Поскольку мы развернули браузер до максимума, мы обнаружили, что ширина выходного окна просмотра такая же, как и разрешение нашего компьютера, как показано на рисунке выше, оба – 1920. Итак, мы пришли к выводу,На компьютере, когда браузер развернут, ширина области просмотра компьютера = ширина разрешения; то есть ширина области просмотра браузера на стороне компьютера связана с разрешением самого компьютера.。
1 PPI
Прежде всего, проясните, что размер значения PPI не имеет ничего общего с разрешением экрана (компьютера или мобильного телефона) или размером области просмотра (компьютер или мобильный телефон). Полное название PPI:Pixal Per Inch Количество пикселей на квадратный дюйм. PPI мобильного телефона очень велик, поэтому экран маленький, но на нем много пикселей, поэтому зернистость мала (экран сетчатки), что делает невозможным просмотр пикселей на экране.
ScrollX и scrollY (pageXOffset и pageYOffset)
scrollX и scrollY используются, когда нужно получить количество пикселей, на которые документ пролистали в данный момент соответственно по горизонтали и вертикали. Эти свойства доступны только для чтения.
const scrollX = window.scrollX;
const scrollY = window.scrollY;
Возвращаемое ими значение является числом с плавающей точкой. Для того чтобы сделать его целочисленным, можно, например, воспользоваться методом Math.round():
const scrollX = Math.round(window.scrollX);
const scrollY = Math.round(window.scrollY);
Определить, был ли пролистан контент можно, например так:
const hasScrolling = !(window.scrollX === 0 && window.scrollY === 0);
Нахождение в переменной hasScrolling значения false будет говорить о том, что контент в данный момент не пролистан, true – в противном случае.
Пример, в котором мы выведем на экран информацию о значениях прокрутки:
onscroll – это свойство, посредством которого мы назначили обработчик для события scroll для window.
Свойства pageXOffset и pageYOffset идентичны соответственно scrollX и scrollY.
Кроссбраузерное решение (в браузерах в которых не поддерживаются свойства window.scrollX и window.scrollY будут использоваться window.pageXOffset и window.pageYOffset):
const scrollX = window.scrollX ? window.scrollX : window.pageXOffset;
const scrollY = window.scrollY ? window.scrollY : window.pageYOffset;
Знание двух видовых экранов
Что касается области просмотра, я в основном ссылаюсь на следующие 7 блогов:Три исследовательских статьи PPK Great God на Viewport:http://www.quirksmode.org/mobile/viewports2.html http://www.quirksmode.org/mobile/viewports.html http://www.quirksmode.org/mobile/metaviewport/#t10 И переводы трех статей выше:http://weizhifeng.net/viewports2.html http://weizhifeng.net/viewports.html http://blog.csdn.net/aiolos1111/article/details/51919795 И блог, упомянутый в начале этой статьи:http://www.cnblogs.com/2050/p/3877280.html
Сначала процитируйте описание в статье PPK, чтобы объяснить, что такое Viewport.
George Cummins explains the basic concept best here at Stack Overflow:
“ Imagine the layout viewport as being a large image which does not change size or shape. Now image you have a smaller frame through which you look at the large image. The small frame is surrounded by opaque material which obscures your view of all but a portion of the large image. The portion of the large image that you can see through the frame is the visual viewport. You can back away from the large image while holding your frame (zoom out) to see the entire image at once, or you can move closer (zoom in) to see only a portion. You can also change the orientation of the frame, but the size and shape of the large image (layout viewport) never changes. ”
See also this explanation by Chris.
Джордж Камминс дал лучшее объяснение основных концепций переполнения стека:Думайте о видовом экране макета как о большом изображении, которое нельзя изменить по размеру или форме. Теперь представьте, что у вас есть рамка меньшего размера, и вы смотрите через нее на эту большую картину. Эта небольшая рамка окружена непрозрачными материалами, закрывающими все ваши взгляды, и вы можете видеть только часть общей картины. Часть общей картины, которую вы можете увидеть через эту структуру, – это визуальное окно просмотра. Вы можете отодвинуть (увеличить) рамку, чтобы просмотреть все изображение, или вы можете приблизиться (уменьшить масштаб), чтобы увидеть только его часть. Вы также можете изменить ориентацию кадра, но размер и форма видового экрана макета никогда не изменятся.
Позвольте мне объяснить, что такое Viewport, исходя из моего собственного понимания:
1. Область просмотра – это «холст», используемый для отображения веб-страниц в браузере мобильного устройства (или веб-просмотра в приложении).
2. Страница на мобильном устройстве отображается в окне просмотра.
3. В браузерах мобильных устройств есть метатег области просмотра, и цель введения области просмотра – решить проблему, связанную с тем, что страница ПК может нормально отображаться на мобильном телефоне, а макет страницы не будет сбивать с толку из-за меньшего размера экрана и сжатого макета.
4. После введения концепции Viewport и следующих правил макет веб-страниц ПК, которые не оптимизированы для мобильных браузеров, не будет разрушен.Пользователи могут просматривать другие части веб-страницы с помощью панорамирования и масштабирования.
5. PPK God проводит много исследований в области видовых экранов на мобильных устройствах и считает, что на мобильных устройствах существует три области просмотра: область просмотра макета, область просмотра изображений и идеальная область просмотра.
Давайте объясним эти три окна просмотра отдельно ниже.
OuterWidth и outerHeight
Свойства «window.outerWidth» и «window.outerHeight» применяются довольно редко. Они предназначены для получения соответственно ширины и высоты всего окна браузера (включая границы самого окна, панель закладок и т.д.).
// ширина всего окна браузера
const width = window.outerWidth;
// высота всего окна браузера
const height = window.outerHeight;
Пример, в котором мы выведем данные о внешних размерах окна на экран:
Три метатега управляют окном просмотра
По умолчанию область просмотра мобильных устройств – это область просмотра макета, но при разработке веб-сайта для мобильных устройств нам нужно идеальное окно просмотра. Итак, как мне получить идеальное окно просмотра? Настала очередь метатега.
При разработке сайта для мобильных устройств рекомендуется использовать в теге head следующий код:
Какова цель этого кода?
Пользователи не могут изменять масштаб. У разных веб-сайтов разные требования. Мы не будем подробно объяснять. Главное – посмотреть наwidth=device-widthс участиемinitial-scale=1.0Роль:
Итак, комбинируя эти два правила, знайте, что функция этого ярлыка состоит в том, чтобы сделать ширину области просмотра макета равной ширине экрана устройства, а затем равной ширине идеального окна просмотра. Это также лучший принцип для мобильных веб-страниц:
Ширина области просмотра = ширина области просмотра макета = ширина устройства (ширина устройства)
1 пиксель устройства
Единицей разрешения устройства является пиксель устройства.
С концепцией пикселей устройства мы можем объяснить в таблице ниже: Причину, по которой разрешения одинаковы на мобильных устройствах с разным размером дюймов – потому чтоОтносительность пикселей устройства
Примечание: источник данных в таблицеHuawei Честь 8:http://www.vmall.com/product/938665621.html IPhone6S Plus:https://www.apple.com/cn/iphone-6s/specs/
1 Разрешение устройства
Единица разрешения устройства – пиксели устройства (пиксели).
Кстати, упоминая разрешение устройства, процитируйте блог по следующему адресу:http://www.chinaz.com/manage/2015/0902/441624.shtml
На том же мобильном телефоне или компьютерном устройстве пиксели устройства являются фиксированными, что устанавливается производителем на заводе, то есть разрешение устройства является фиксированным.
7 Независимый от устройства пиксель
Также называется логическим пикселем или сокращенно провалом.
Основываясь на взаимосвязи между указанными выше пикселями устройства и пикселями CSS и официальным определением DPR, мы можем сделать следующие выводы:
CSS-пиксели = независимые от устройства пиксели = логические пиксели
Ниже еще цитатаhttp://www.cnblogs.com/2050/p/3877280.htmlОписание содержания статьи:
В мобильных браузерах и некоторых браузерах для настольных ПК объект окна имеет свойство devicePixelRatio. Его официальное определение: отношение физических пикселей устройства к пикселям, независимым от устройства, то есть devicePixelRatio = физические пиксели / независимые пиксели. ЧтобыПиксели CSS можно рассматривать как независимые пиксели устройства, поэтому с помощью devicePixelRatio мы можем узнать, сколько физических пикселей представляет пиксель CSS на устройстве. Например, на iPhone с экраном Retina значение devicePixelRatio равно 2, что означает, что 1 пиксель CSS эквивалентен 2 физическим пикселям. Но следует отметить, что у devicePixelRatio все еще есть некоторые проблемы с совместимостью в разных браузерах, поэтому мы не можем полностью доверять этому сейчас, вы можете увидеть конкретную ситуациюэта статья
Свойства innerWidth и innerHeight
innerWidth – это свойство, которое позволяет получить внутреннюю ширину окна в пикселях (включая при этом в этот размер ширину вертикальной полосы прокрутки при её наличии).
innerHeight, в отличие от innerWidth предназначено соответственно для возвращения внутренней высоты окна в пикселях.
// получим внутреннюю ширину окна в пикселях
const width = window.innerWidth;
// получим внутреннюю высоту окна в пикселях
const height = window.innerHeight;
Свойства innerWidth и innerHeight доступны только для чтения и не имеют значения по умолчанию.
Если код выполняется в контексте объекта window, то его свойства и методы можно использовать без указания window:
// получим внутреннюю ширину окна в пикселях
const width = innerWidth;
// получим внутреннюю высоту окна в пикселях
const height = innerHeight;
Пример, в котором мы выведем на страницу данные о внутренних размерах окна:
onresize – это свойство, посредством которого мы назначили обработчик для события resize для window.
Четыре резюме
1. Пиксель устройства – это единица разрешения устройства, размер пикселя одного и того же устройства является фиксированным.2. DPR = пиксель устройства / пиксель CSS = пиксель устройства / независимый пиксель устройства ~ = PPI / 160 = коэффициент масштабирования страницы2. Ширина визуального окна просмотра = идеальная ширина окна просмотра / коэффициент масштабирования (где ширина идеального окна просмотра того же устройства фиксирована, поэтому масштабирование страницы меняет только размер визуального окна просмотра)3. CSS-пиксель = независимый от устройства пиксель = логический пиксель.4. Количество CSS-пикселей того же устройства остается неизменным, но длина каждого CSS-пикселя будет изменяться, то есть CSS-пиксели будут растягиваться.5. Способ добиться масштабирования в современных браузерах – это «растягивать» пиксели: то есть длина каждой единицы пикселя CSS изменяется, в то время как общее количество пикселей не изменяется. Таким образом, масштабирование вызовет изменения в пикселях CSS. Чтобы6. При масштабировании размер визуального окна просмотра изменится, а размер окна просмотра макета останется неизменным.7. Размер области просмотра макета на мобильном устройстве почти равен визуальной области браузера (визуальная область просмотра).8. 1 пиксель в css не означает 1 пиксель на устройстве.9. Чем больше разрешение мобильного устройства, тем больше физических пикселей представлено 1 пикселем в CSS и тем больше значение devicePixelRatio.10. Ширина идеального окна просмотра равна ширине экрана мобильного устройства (эта идеальная ширина относится к ширине, рассчитанной в пиксельных единицах CSS, то есть логической ширине экрана в пикселях), и не имеет ничего общего с физической шириной устройства. Ширина идеального окна просмотра того же устройства фиксирована. Чтобы11. Общие операционные системы и ядра браузеров на мобильных терминалах следующие.
12. Принцип размера дизайна мобильной страницы: поскольку dpr обычно составляет 1 или 2, дизайн страницы должен быть разработан в соответствии с двойным размером логических пикселей устройства.13. Наконец, завершите статью тремя картинками.а. Эффект мобильной страницы, когда метатег области просмотра не установлен.
Типы boxes
Тип бокса – это ещё один фактор, от которого будет зависеть как бокс будет располагаться на веб-странице.
Блочные боксы (block boxes)
Блочный бокс представляет собой прямоугольник, имеющий ширину (width), высоту (height), внешние отступы (margin), внутренние отступы (padding), границу (border) и область для контента.
Ширину блочному боксу можно явно не задавать. В этом случае он будет иметь доступную ширину того блочного бокса, в котором он расположен.
Высоту блочному боксу тоже можно открыто не устанавливать. В этом случае высота бокса будет определяться браузером и рассчитываться таким образом, чтобы её было достаточно для отображения всех элементов, помещённых в данный бокс.
В нормальном потоке (normal flow) блочные боксы размещаются вертикально один под другим в соответствии с тем порядком, в котором они записаны в HTML коде с учётом их вложенности. В горизонтальном направлении они прикрепляются к левому краю области контента того блочного бокса, в котором каждый из них расположен.
3 DPI&PPI
Цитатаhttp://weizhifeng.net/you-should-know-about-dpi.htmlОпределения DPI и PPI следующие:
DPI (точек на дюйм) – это количество чернильных точек на дюйм, которое может распылять принтер, используемое для измерения плотности пространственных точек в полиграфической промышленности.PPI (пикселей на дюйм) – это количество пикселей на дюйм экрана (то есть количество пикселей в квадрате с диагональю 1 дюйм), которое используется для измерения плотности пикселей на дисплее компьютера.В настоящее время PPI (в основном iOS) и DPI (например, в Android) используются в описании параметров компьютерных устройств отображения, и их значение одинаково, и оба они представляют плотность пикселей экрана.
Соотношение между плотностью пикселей экрана, разрешением экрана и размером экрана выглядит следующим образом:
Примечание. В приведенной выше формуле, если разрешение составляет 1920 пикселей * 1080 пикселей, 1920 пикселей – это вертикальное направление в формуле, а 1080 пикселей – горизонтальное направление в формуле.
ScreenX и screenY (screenLeft и screenTop)
«window.screenX» и «window.screenY» предназначены для получения положения окна браузера (т.е. его x и y координат) относительно экрана.
const screenX = window.screenX;
const screenY = window.screenY;
В Internet Explorer 8 и более ранних версиях, объект window не содержит свойств screenX и screenY. В них это выполняется через «window.screenLeft» и «window.screenTop». В то же время Mozilla Firefox (до версии 64) поддерживает только «window.screenX» и «window.screenY». Остальные браузеры поддерживает как один, так и другой вариант свойств.
const screenX = window.screenX ? window.screenX : window.screenLeft;
const screenY = window.screenY ? window.screenY : window.screenTop;
Например, выведем координаты окна браузера относительно экрана при клике на ссылку:
1 область просмотра макета (layout viewport)
Это первое окно просмотра, представленное на мобильных устройствах. Процитирую абзац, который мне очень нравится проиллюстрировать область просмотра макета:
Во-первых, браузеры на мобильных устройствах считают, что они должны обеспечивать нормальное отображение всех веб-сайтов, даже тех, которые не предназначены для мобильных устройств. Но если видимая область браузера используется в качестве области просмотра по умолчанию, потому что экран мобильного устройства не очень широкий, поэтому, когда эти веб-сайты, предназначенные для настольных браузеров, отображаются на мобильном устройстве, область просмотра мобильного устройства обязательно будет слишком узкой. , А скученные, даже макет что ли перепутают. Кто-то может спросить, разве мало мобильных телефонов с очень большим разрешением, например 768×1024 или 1080×1920, можно ли на таких мобильных телефонах отображать веб-сайты, разработанные для настольных браузеров? Мы уже говорили, что 1 пиксель в CSS не означает 1 пиксель на экране. Чем больше ваше разрешение, тем больше физических пикселей представлено 1 пикселем в CSS и тем больше значение devicePixelRatio. Это легко понять, потому что вы Разрешение увеличилось, но размер экрана не стал намного больше. 1 пиксель в CSS должен быть сделан для представления большего количества физических пикселей, чтобы размер 1 пикселя на экране был аналогичен размеру устройств с низким разрешением, в противном случае он будет Он слишком мал, чтобы ясно видеть. Таким образом, на таком устройстве, как 1080×1920, по умолчанию, возможно, вам нужно только установить ширину div более 300 пикселей (в зависимости от значения devicePixelRatio), что является шириной всего экрана.
Вернемся к теме: если видимая область браузера на мобильном устройстве настроена на область просмотра, некоторые веб-сайты будут отображаться беспорядочно из-за слишком узкой области просмотра, поэтому эти браузеры решают установить более широкую область просмотра по умолчанию. Значение, например 980px, поэтому даже веб-сайты, предназначенные для настольных компьютеров, могут нормально отображаться в мобильных браузерах. ppk вызывает окно просмотра по умолчанию для этого окна просмотра макета браузера.
На следующем рисунке показана ширина окна просмотра макета по умолчанию в браузере на некоторых устройствах:
Примечание: рисунок взят из:http://www.quirksmode.org/mobile/metaviewport/#t10Значения на рисунке разумные, нет правильных или неправильных, это значение определяет производитель оборудования.
1 Процесс отображения веб-страниц мобильными браузерами
Здесь необходимо объяснить процесс отображения веб-страниц мобильными браузерами:
Шаг 1: Визуализация – Визуализация всей страницы в окне просмотра макета, чтобы убедиться, что макет страницы правильный. ЧтобыШаг 2: Масштаб ———— Увеличьте масштаб всего окна просмотра макета до размера визуального окна просмотра, чтобы страница полностью отображалась на экране телефона.
Именно из-за масштабирования размер шрифта на мобильном телефоне составляет 40 пикселей, а размер шрифта 12 пикселей на ПК имеет такой же физический размер.
2 Получить размер области просмотра макета
Процесс генерации boxes – это часть алгоритма модели визуального форматирования. Процесс генерации boxes из HTML элементов разберём на примерах.
Сначала рассмотрим простые примеры, когда из одного HTML элемента генерируется один бокс.
2. В этом примере из элемента, имеющего display: inline генерируется один inline бокс:
Теперь разберём более сложные примеры.
3. Пример, в котором из одного HTML элемента генерируются несколько боксов.
В этом примере будут генерироваться:
Это связано с тем, что блочный бокс не может в себе напрямую содержать текст. Он может содержать только другие боксы.
А так как текст не заключён в inline HTML элемент, то алгоритм модели визуального форматирования заключает его в анонимный строчный бокс (anonymous inline box).
4. Пример, в котором элемент с блочным отображением содержит в себе текст и элемент с inline отображением.
Структура сгенерированных боксов:
Из этого фрагмента будут генерироваться следующие боксы:
2 Ширина области просмотра мобильного телефона
Прежде всего, очень важно быть ясным, то есть Размер области просмотра мобильного браузера не имеет ничего общего с разрешением мобильного телефона! Размер области просмотра мобильного браузера не имеет ничего общего с разрешением мобильного телефона! Размер области просмотра мобильного браузера не имеет ничего общего с разрешением мобильного телефона!。
На мобильном телефоне есть два окна просмотра: ① Область просмотра по умолчанию для браузера мобильного телефона, размер области просмотра по умолчанию для мобильного телефона всегда 980 пикселей, что не имеет ничего общего с разрешением мобильного телефона; ② Ограниченное заднее окно просмотра браузера мобильного телефона, ширина ограниченного окна просмотра совпадает с шириной устройства (фактическая ширина экрана мобильного телефона), которая фактически является числом, установленным вручную. Перед тем, как каждое устройство покидает завод, устанавливается ширина после ограничения области просмотра.
1 Область просмотра по умолчанию мобильного браузера
Давайте сначала посмотрим на окно просмотра по умолчанию мобильного браузера. Почему оно установлено на 980 пикселей?
История гласит следующее: однажды лидер банды Цяо задумался о проблеме, то есть, если его мобильный телефон Apple популярен на рынке, но различные веб-сайты не успели создать профессиональную веб-страницу для мобильных телефонов, то пользователи должны использовать свои мобильные телефоны для доступа к компьютерной версии веб-страницы. Как использовать маленький экран для доступа к странице большого экрана, которая также читается? Лидер Qiao хотел исправить ширину области просмотра для мобильного телефона так, чтобы ширина области просмотра мобильного телефона была равна центральной ширине большинства веб-страниц ПК в мире, которая составляла 980 пикселей. Таким образом, при использовании мобильного телефона для доступа к компьютерной версии веб-страницы не остается пустого места. Например, с высоты 3000 метров, просматривая всю страницу, пользователь может зажать два пальца, чтобы увеличить ту область, которую пользователь хочет увидеть. Телефоны Android также уважают решение банды Джо и устанавливают область просмотра своего телефона на 980 пикселей.
2 Ограниченный вид сзади мобильного браузера
Мы добавляем операторы, которые ограничивают область просмотра перед страницей.
Тогда мы будем использоватьdocument.documentElement.clientWidthЧтобы распечатать ширину области просмотра, я обнаружил, что значение ширины области просмотра совпадает с шириной экрана. И разные мобильные телефоны имеют разные значения. Причина в том, что размер области просмотра после ограничения устанавливается каждым производителем мобильного телефона в соответствии с его мобильным телефоном. Другими словами, из-за разных мобильных телефонов (разных марок и моделей) ширина экрана мобильного телефона также разная.Ширина области просмотра разная для разных мобильных телефонов!。 Так как все они разные, почему область просмотра имеет ограничение, просто используйте область просмотра по умолчанию? , потому что экран телефона слишком мал! С таким маленьким экраном, чтобы полностью передать веб-страницу шириной 980 пикселей, в результате слова на веб-странице должны стать настолько маленькими, что люди вообще не смогут их прочитать. И используйте ограниченное окно просмотра для передачи страницы слой за слоем, например, используйте ограниченное окно просмотра 340 пикселей для наложения страницы 980 пикселей.Хотя будет горизонтальная полоса прокрутки, размер шрифта на странице очень подходит для чтения человеческим глазом. Это основная причина, по которой вы хотите использовать ограниченное окно просмотра. Размер области просмотра мобильного телефона, о котором мы поговорим позже, относится к ограниченному размеру области просмотра. ps: размер ограниченного окна просмотра обычно находится в диапазоне от 320 до 480 пикселей.
2 CSS-пиксель (CSS-пиксель)
Пиксели устройства и пиксели CSS обычно используют пиксель в качестве единицы измерения, а когда в браузере настольного компьютера увеличено на 100%, 1 пиксель CSS часто соответствует 1 физическому пикселю экрана компьютера, что может вызвать у нас иллюзию. То есть пиксели в css – это физические пиксели устройства. ЧтобыНо на самом деле это не так. Пиксель CSS – это всего лишь абстрактная единица. В разных устройствах или в разных средах длина физического пикселя устройства, представленного 1 пикселем в CSS, различается. ЧтобыНа веб-страницах, разработанных для настольных браузеров, нам не нужно об этом заботиться, но на мобильных устройствах мы должны это понимать.
Из приведенного выше обсуждения можно сделать следующие выводы:
1 пиксель в CSS не всегда означает 1 пиксель в пикселях устройства, особенно на мобильных устройствах.
Это видно из приведенного выше определения:
1 Масштаб
Цитата из обсуждения Великого Бога ППК, чтобы проиллюстрировать принцип масштабирования:
Масштабирование, реализованное в современных браузерах, представляет собой не что иное, как «растягивание вверх» пикселей. То есть ширина элемента не изменяется со 128 до 256 пикселей; вместо этого фактические пиксели увеличиваются в размере вдвое. Формально элемент все еще имеет ширина 128 пикселей CSS, хотя это занимает пространство в 256 пикселей устройства (исходный URL:http://www.quirksmode.org/mobile/viewports.html)
Перевод:Способ масштабирования в современных браузерах – «растягивать» пиксели (то есть длина каждой единицы пикселя CSS изменяется, а общее количество пикселей не изменяется). (Если вы удвоите размер элемента с помощью элемента 128 пикселей, примечание переводчика) Ширина элемента не изменяется со 128 пикселей на 256 пикселей. Фактически, «фактический пиксель» становится в 2 раза больше размера (то есть 256 пикселей), и в форме этого элемента Ширина по-прежнему 128 пикселей, хотя она уже занимает 256 пикселей устройства.
Таким образом, можно сделать следующие выводы:
Масштабирование вызывает изменения в пикселях CSS, то есть изменения физических пикселей, представленных каждым пикселем CSS. Например, когда пользователь удваивает размер страницы, физические пиксели, представленные 1 пикселем в css, также удваиваются; и наоборот, если страница уменьшается на один раз, физические пиксели, представленные 1 пикселем в css, также будут удвоены.
Таким образом, с приведенным выше описанием можно сделать следующие выводы:
Коэффициент масштабирования страницы = физические пиксели / пиксели CSS
5 Связь между DPR и PPI
Интегрируя приведенную выше карту границ плотности Android и Apple, соотношение между DPR и PPI можно получить следующим образом:
DPR = PPI/160
1 Две проблемы
Согласно приведенному выше описанию, необходимо прояснить два вопроса:
1 Если вы не установили метатег области просмотра
Если вы не устанавливаете метатег видового экрана, то значение ширины видового экрана макета по умолчанию для браузера на мобильном устройстве составляет 980 пикселей, 1024 пикселей и т. Д., Короче говоря, оно больше ширины экрана (единица ширины в пикселях здесь относится к пикселям в CSS, что Px, представляющий физические пиксели реального экрана, – это не одно и то же). ЧтобыЕсли вы не установите метатег видового экрана, страница ПК будет увеличена и отображена на мобильном устройстве!
2 Зачем использовать два правила с одной и той же функцией
По картинке выше мы можем получить:Проблема совместимости с width = device-width на iPhone и iPad;Initial-scale = 1.0 имеет проблемы совместимости с IE
Чтобы установить ширину области просмотра макета равной ширине идеальной области просмотра, вы можете установить width = device-width или initial-scale = 1, но оба они имеют небольшой недостаток, то есть iphone, ipad и IE не будут отображаться по горизонтали и вертикали. Все точки основаны на идеальной ширине области просмотра вертикального экрана. Таким образом, наиболее совершенным способом записи должна быть запись обоих, так что initial-scale = 1 решает проблемы iphone и ipad, а width = device-width решает проблемы IE. Итак, окончательная версия кода на мобильном телефоне:
3 идеальное окно просмотра (ideal viewport)
Я снова цитирую абзац, который мне очень нравится, чтобы проиллюстрировать идеальное окно просмотра:
И поскольку все больше и больше веб-сайтов будут индивидуально разработаны для мобильных устройств, необходимо иметь область просмотра, которая может идеально адаптироваться к мобильным устройствам. Так называемая идеальная адаптация означает, что, во-первых, пользователи могут просматривать все содержимое веб-сайта в обычном режиме без увеличения пользователя и горизонтальной полосы прокрутки; во-вторых, размер отображаемого текста является подходящим, например, текст размером 14 пикселей, который не будет Дисплей на экране с высокой плотностью пикселей слишком мал, чтобы его можно было четко видеть. В идеале текст размером 14 пикселей будет иметь одинаковый размер независимо от того, какой плотности экрана или разрешения включен. Конечно, не только текст, но и другие элементы, например картинки. ppk называет это окно просмотра идеальным окном просмотра, которое является третьим окном просмотра – идеальным окном просмотра для мобильных устройств.
Идеальное окно просмотра не имеет фиксированного размера, и разные устройства имеют разные идеальные окна просмотра. Идеальная ширина области просмотра для всех iPhone составляет 320 пикселей, независимо от того, является ли ширина его экрана 320 или 640, то есть в iPhone 320 пикселей в CSS представляет ширину экрана iPhone.
Но устройства Android более сложны. Их размер составляет 320 пикселей, 360 пикселей, 384 пикселей и т. Д. О ширине идеального окна просмотра для различных устройств можно обратиться кhttp://viewportsizes.comОбратите внимание, в нем идеальная ширина для многих устройств.
Подводя итог: ppk делит окна просмотра на мобильных устройствах на три категории: область просмотра макета, визуальная область просмотра и идеальная область просмотра. Идеальная область просмотра – это наиболее подходящая область просмотра для мобильных устройств. Ширина идеального окна просмотра равна ширине экрана мобильного устройства (т. Е. Логика устройства). Pixels, автор этой статьи), пока ширина элемента установлена равной ширине идеального окна просмотра в css, тогда ширина этого элемента равна ширине экрана устройства, то есть ширина составляет 100%. Смысл идеального окна просмотра состоит в том, что независимо от разрешения экрана веб-сайты, разработанные для идеального окна просмотра, могут быть идеально представлены пользователям без ручного масштабирования или горизонтальной прокрутки.
Из приведенного выше описания можно сделать вывод:
Ширина идеального окна просмотра равна ширине экрана мобильного устройства (эта идеальная ширина относится к ширине, вычисленной в пиксельных единицах CSS, то есть логической ширине экрана в пикселях), и не имеет ничего общего с физической шириной устройства. В CSS эта ширина эквивалентна ширине, представленной 100%.
Есть:Ширина идеального окна просмотра = логическая ширина экрана в пикселях
Наконец, давайте поговорим о необходимости идеального окна просмотра через цитату:
Зачем нам нужен идеальный вьюпорт? Например, идеальная ширина области просмотра мобильного телефона с разрешением 320×480 составляет 320 пикселей, а идеальная ширина области просмотра другого мобильного телефона с таким же размером экрана, но с разрешением 640×960 также составляет 320 пикселей, так почему же идеальная ширина этого мобильного телефона с большим разрешением должна отличаться? Совпадает ли идеальная ширина телефона с меньшим тарифом? Это потому, что это единственный способ убедиться, что один и тот же веб-сайт выглядит одинаково или похоже на устройствах с разным разрешением. Фактически, хотя на рынке существует так много разных типов мобильных телефонов с разными брендами и разными разрешениями, их идеальную ширину окна просмотра можно суммировать как 320, 360, 384, 400 и т. Д., Что очень близко. Идеальная ширина Сходство означает, что веб-сайт, который мы создали для идеального окна просмотра определенного устройства, не будет сильно отличаться и даже не будет вести себя на других устройствах.
4 DPR
Полное название – Device Pixel Ratio. Сначала дайте его официальное определение:
Расчет ppi по приведенной выше формуле позволяет получить границу плотности и коэффициент масштабирования по умолчанию, то есть соотношение пикселей устройства –dpr
Соотношение пикселей Android-устройств следующее:
Получить пиксели устройства Apple проще:
Сначала укажите, что база демаркации плотности равна 160, а затем соотношение пикселей устройства = PPI, деленное на базу демаркации плотности 160.
2 Коэффициент масштабирования
Вышеупомянутое понятие «начальный коэффициент масштабирования страницы», теперь мы объясним, что такое коэффициент масштабирования:
Сначала дайте формулу PPK God для масштабного коэффициента
zoom factor = ideal viewport width / visual viewport width (PS: ширина визуального окна просмотра относится к ширине видимой области браузера)
Из этой формулы можно сделать вывод:
6 Связь между пикселями устройства и пикселями CSS
Получив соотношение пикселей устройства (dpr), вы можете узнать соотношение между пикселями устройства и пикселями CSS. Когда это соотношение составляет 1: 1, для отображения 1 пикселя CSS используется 1 пиксель устройства. При соотношении 2: 1 для отображения 1 пикселя CSS используются 4 пикселя устройства. При соотношении 3: 1 для отображения 1 пикселя CSS используются 9 (3 * 3) пикселей устройства.
Следовательно, существует следующая формула:
DPR = пиксели устройства / пиксели CSS
2 визуальное окно просмотра (visual viewport)
Я также цитирую абзац, который мне очень нравится, чтобы проиллюстрировать визуальное окно просмотра:
1 Получите размер визуального окна просмотра
Модель визуального форматирования (visual formatting model) – это набор инструкций для пользовательских агентов (браузеров), в соответствии с которыми они должны обрабатывать HTML документы для их визуального представления на экранах устройств. Это основополагающая концепция. Знание этой концепции необходимо любому веб-разработчику, т.к. в этом случае он сможет понять как тот или иной фрагмент HTML кода и стилей, применённых к нему, будет отображён в браузере.
В центре этой модели лежат (боксы). Генерация выполняется из HTML элементов. Это означает, что браузеру перед тем, как отобразить страницу, необходимо из HTML элементов сгенерировать . Следующий этап – это расположить по определённому алгоритму на веб-странице.
Этот алгоритм зависит от множества факторов:
Рассмотрим некоторые из этих факторов.
Строчные боксы (inline box)
Строчные боксы предназначены для представления текстового контента. Они располагаются горизонтально, как строки текста. При этом если inline box не помещается в текущую строку, то он переносится (то, что не поместилось) на следующую строку.
Строчным боксам нельзя задать ширину (width) и высоту (height), т.к. их размеры браузер вычисляют самостоятельно.
Изменить высоту этих inline boxes можно с помощью CSS свойства line-height (высота линии).
Задание отступов в строчных боксах с помощью margin и padding выполняется очень редко, особенно это касается боксов, содержимое которых размещается на нескольких строках. Это связано с тем, что margin и padding в этом случае не работают. Для остальных строчных боксов, т.е. у которых содержимое располагается на одной строке, можно использовать различные отступы (margin и padding) за исключением margin-top и margin-bottom.
Когда создаёте HTML 5 документ применяйте элементы в соответствии с их назначением (смыслом). При выборе элемента не придавайте важность CSS свойству display, которое он имеет по умолчанию. Данное значение свойства всегда можно переназначить с помощью CSS.
Итоговый пример
В завершении разберём из каких боксов будет состоять следующий HTML документ и как они будут располагаться на странице в браузере.
