Мобильные браузеры обычно рендеринг страниц в виртуальном окне, который шире, чем экран. Это виртуальное окно является ViewPort. Цель состоит в том, чтобы отображать веб -страницы, которые обычно не адаптированы к мобильному терминалу, чтобы их можно было полностью отображаться для пользователей. Иногда, когда мы используем мобильные устройства для доступа к веб -странице рабочего стола, мы увидим горизонтальную полосу прокрутки, а ширина области отображения здесь - ширина просмотра.
Регулярно, если страница может быть масштабирована, используйте следующий код
<meta name = viewport content = width = ширина устройства, начальная масштаба = 1 />
Если вы не хотите масштабировать, используйте следующий код
2. Разница между пикселями и пикселями устройства в CSS<meta name = viewport content = width = ширина устройства, начальная шкала = 1,0, минимальная масштаба = 1,0, максимальная шкала = 1,0, пользовательский шкалера = нет>
При разработке настольных веб -страниц 1PX в CSS составляет 1PX на устройстве; Тем не менее, 1px в CSS - это просто абстрактное значение, которое не представляет фактические пиксели; В то время как в мобильных устройствах плотность пикселей различных устройств отличается, а 1PX в CSS может не быть равной значению пикселя реального устройства. Масштаб пользователя также изменит, сколько устройств пикселей 1PX в CSS представляет. Это соотношение является DevicePixelRatio
Физические пиксели/независимые пиксели = devicePixelRatio
Мы можем увеличить масштаб в браузере и печать. Независимые пиксели в нем можно понимать как PX в CSS.
3. Основы ViewportКод:
<meta name = viewport content = width = ширина устройства, начальная масштаба = 1, максимальная масштаба = 1>
Ниже приведены несколько свойств ViewPort. Эти свойства могут быть использованы в смешанном манере. Многочисленные свойства должны быть разделены запятыми одновременно. Здесь мы расширяем концепцию под названием «Идеальный просмотр», которая относится к видоубийству при идеальных обстоятельствах. Он может просматривать все содержимое веб -страницы обычно без пользовательского масштабирования и горизонтальной прокрутки, и может четко видеть весь текст. Независимо от того, насколько маленький этот текст определяется в CSS, его можно увидеть четко при отображении.
| свойство | описывать |
|---|---|
| ширина | Управляет шириной видового порта, вы можете указать число; или установить ширину устройства, чтобы указать |
| высота | Управляйте высотой видоубийта. Это свойство не очень важно и редко используется. |
| начальная масштаба | Управляйте уровнем масштабирования в соответствии с IdealViewport при первоначальной загрузке страницы, обычно устанавливается на 1, что может быть десятичным |
| максимальная масштаба | Позволяет максимальному значению масштабирования пользователя быть номером и может быть десятичным |
| Минимальный масштаб | Позволяет минимальному значению масштабирования пользователя быть номером, которое можно взять с децималами. |
| Пользовательский масштаб | Независимо от того, разрешено ли пользователю масштабировать, значение - нет или да, не позволяют не допустить, да означает разрешить |
1. Всемирная и начальная масштаба
При установке ширины и начальной масштаба браузер автоматически выберет наибольшее значение для адаптации. Объект:
<meta name = viewport content = width = 400, начальная масштаба = 1>
Браузер выберет большое значение для адаптации. Если ширина идеального просмотра текущего окна составляет 300, а значение начального масштаба составляет 1, значение ширины составляет 400; Если идеальный вид просмотра текущего окна составляет 480, выбирается 480.
Фактически, ширина = ширина устройства и начальная масштаба = 1, оба представляют собой применение идеального просмотра, но на мобильных устройствах, таких как iPad и iPhone и IE, горизонтальные и вертикальные экраны не различаются, а ширина вертикального экрана принимается по умолчанию. Лучший способ написать совместимость - это
<meta name = viewport content = width = ширина устройства, начальная масштаба = 1>
2. Динамически изменить атрибуты
а document.write ()
document.write ('<meta name = viewport content = width = width устройства, начальная масштаба = 1>')
b.setattribute
концепция Viewportvar mvp = document.getElementById ('testViewport');
mvp.setattribute ('content', 'width = 480');
Мобильные браузеры обычно рендеринг страниц в виртуальном окне, который шире, чем экран. Это виртуальное окно является ViewPort. Цель состоит в том, чтобы отображать веб -страницы, которые обычно не адаптированы к мобильному терминалу, чтобы их можно было полностью отображаться для пользователей. Иногда, когда мы используем мобильные устройства для доступа к веб -странице рабочего стола, мы увидим горизонтальную полосу прокрутки, а ширина области отображения здесь - ширина просмотра.
Разница между пикселями и пикселями устройства в CSSПри разработке настольных веб -страниц 1PX в CSS составляет 1PX на устройстве; Тем не менее, 1px в CSS - это просто абстрактное значение, которое не представляет фактические пиксели; В то время как в мобильных устройствах плотность пикселей различных устройств отличается, а 1PX в CSS может не быть равной значению пикселя реального устройства. Масштаб пользователя также изменит, сколько устройств пикселей 1PX в CSS представляет. Это соотношение является DevicePixelRatio
Физические пиксели/независимые пиксели = devicePixelRatio
Мы можем увеличить масштаб в браузере и печать. Независимые пиксели в нем можно понимать как PX в CSS.
Основы ViewportТипичный мобильный сайт содержит контент, аналогичный следующему:
<meta name = viewport content = width = ширина устройства, начальная масштаба = 1, максимальная масштаба = 1>
Ниже приведены несколько свойств ViewPort. Эти свойства могут быть использованы в смешанном манере. Многочисленные свойства должны быть разделены запятыми одновременно. Здесь мы расширяем концепцию под названием «Идеальный просмотр», которая относится к видоубийству при идеальных обстоятельствах. Он может просматривать все содержимое веб -страницы обычно без пользовательского масштабирования и горизонтальной прокрутки, и может четко видеть весь текст. Независимо от того, насколько маленький этот текст определяется в CSS, его можно увидеть четко при отображении.
| свойство | описывать |
|---|---|
| ширина | Управляет шириной видового порта, вы можете указать число; или установить ширину устройства, чтобы указать |
| высота | Управляйте высотой видоубийта. Это свойство не очень важно и редко используется. |
| начальная масштаба | Управляйте уровнем масштабирования в соответствии с IdealViewport при первоначальной загрузке страницы, обычно устанавливается на 1, что может быть десятичным |
| максимальная масштаба | Позволяет максимальному значению масштабирования пользователя быть номером и может быть десятичным |
| Минимальный масштаб | Позволяет минимальному значению масштабирования пользователя быть номером, которое можно взять с децималами. |
| Пользовательский масштаб | Независимо от того, разрешено ли пользователю масштабировать, значение - нет или да, не позволяют не допустить, да означает разрешить |
1. Всемирная и начальная масштаба
При установке ширины и начальной масштаба браузер автоматически выберет наибольшее значение для адаптации. Объект:
<meta name = viewport content = width = 400, начальная масштаба = 1>
Браузер выберет большое значение для адаптации. Если ширина идеального просмотра текущего окна составляет 300, а значение начального масштаба составляет 1, значение ширины составляет 400; Если идеальный вид просмотра текущего окна составляет 480, выбирается 480.
Фактически, ширина = ширина устройства и начальная масштаба = 1, оба представляют собой применение идеального просмотра, но на мобильных устройствах, таких как iPad и iPhone и IE, горизонтальные и вертикальные экраны не различаются, а ширина вертикального экрана принимается по умолчанию. Лучший способ написать совместимость - это
<meta name = viewport content = width = ширина устройства, начальная масштаба = 1>
2. Динамически изменить атрибуты
а document.write ()
document.write ('<meta name = viewport content = width = width устройства, начальная масштаба = 1>')
b.setattribute
var mvp = document.getElementById ('testViewport');
mvp.setattribute ('content', 'width = 480');
Хорошо, эта статья была представлена вам. Вы можете выбрать в соответствии со своими собственными потребностями в тестировании. Вообще говоря, ПК и мобильные телефоны могут использоваться без адаптивности и не поддерживают масштабирование. Если вы прыгаете на мобильный телефон, вы можете масштабироваться без какого -либо влияния.