Визуальный видовой экран и окно просмотра макета на мобильных устройствах

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

ширина и высота окна просмотра макета равны может отображаться на экране в режиме максимальной масштабирования

Я не совсем понял, что это значит. Когда они говорят "режим максимальной масштабируемости", означает ли это, что окно просмотра макета отличается для разных HTML (и не относится к различным устройствам, таким как iPad, Xoom и т.д.)?

Во-вторых, я создал демонстрационную страницу для измерения этих двух видовых экранов. (Пожалуйста, просмотрите это на iPhone/iPad, чтобы получить правильные значения.)

Я понимаю, что видовое окно макета можно изменить, установив тег meta viewport, но это также изменит визуальный видовое окно - почему? В нем говорится, что визуальный видовой экран является частью страницы, отображаемой в настоящее время на экране, поэтому я понял, что визуальный видовой экран не должен влиять на настройки мета-видового экрана.

Ответы

Ответ 1

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

Понимание различий между пикселями CSS и пикселями устройства может помочь в понимании и ответе на ваши вопросы.

  • Размеры видового экрана макета - это фактически начальные размеры содержимого (в пикселях CSS).

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

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

    Визуальное окно просмотра не может быть больше, чем содержимое на странице.

    Размеры контента во многом определяются окном просмотра макета.

    Размеры видовых экранов макета задаются с помощью правила мета-просмотра.

    Следовательно, размеры визуального видового экрана должны измениться в ответ на изменения в правиле метаобзора.

С тех пор вы спросили (в комментариях):

Почему это, когда содержимое, которое явно больше, чем окно просмотра макета, визуальное окно просмотра растягивается, чтобы соответствовать всем этим? Должна ли быть панель прокрутки?

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

Если вы хотите, чтобы размеры визуального видового экрана не настраивались на полную ширину содержимого при загрузке страницы, установите свойство initial-scale=1 внутри объявления метаобъекта.

В Mozilla Dev Center есть фантастический текст о метатеге просмотров: https://developer.mozilla.org/en/mobile/viewport_meta_tag