Визуальный видовой экран и макет видового экрана на мобильных устройствах - PullRequest
Новая
       21

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

20 голосов
/ 08 сентября 2011

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

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

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

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

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

1 Ответ

17 голосов
/ 10 сентября 2011

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

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

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

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

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

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

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

    Размеры области просмотра макета задаются правилом мета-области просмотра.

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

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

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

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

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

Естьфантастический материал в Центре разработки Mozilla о метатеге области просмотра: https://developer.mozilla.org/en/mobile/viewport_meta_tag

...