Разница между визуальным окном просмотра и окном просмотра макета?

Question

В чем разница между визуальным окном просмотра и окном просмотра макета для мобильного устройства, такого как iPhone / iPad?

Я просмотрел множество онлайн-ресурсов, но до сих пор не уверен в этом.

Answer 1

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

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

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

Отличное решение проблемы см. В http://www.quirksmode.org/mobile/viewports2.html

Answer 2

Найдено очень хорошее объяснение двух здесь .

В итоге:

Окно визуального просмотра

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

Окно просмотра макета

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

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

Насколько широко видовой экран макета?Это зависит от браузера.Safari iPhone использует 980px, Opera 850px, Android WebKit 800px и IE 974px.

Короче говоря, область просмотра макета - это, как правило, ширина области просмотра, когда экран полностью уменьшен.

Answer 3

Окно просмотра макета

Его измерения всегда одинаковы независимо от ориентации или уровня масштабирования, зависят только от окна устройства / браузера.

Окно визуального просмотра

Изменяется (например, при увеличении).Это та часть страницы, которая фактически отображается на экране в любой заданной точке.

Пример видео обоих макетов

Окно просмотра макета: зеленая область на миникарте.
Визуальный видовой экран: красное поле на мини-карте.

Видовой макет и визуальный видовой экран (видео)

На мобильных устройствах / планшетах

На мобильных устройствах по умолчанию все может быть немного сложнее, потому что для обеспечения возможности «полного Интернета» многие мобильные устройства возвращают поддельные более высокие размеры окна просмотра размеров.

Например, классический iPhone по умолчанию сообщает о окне просмотра макета шириной 980 пикселей.Это означает, что если вы создадите элемент iPhone размером 320px, он заполнит только около трети экрана.

Однако этот механизм не очень хорош для страниц, оптимизированных дляузкие экраны с использованием медиазапросов .

Когда мы создаем адаптивные веб-сайты, очень полезно использовать метатег viewport, который позволяет нам управлять масштабированием и макетом viewport многих устройств (используя реальные размеры, а неподделка).

<meta name="*viewport*" content="*width=device-width*, initial-scale=1, maximum-scale=1" />

Примеры мета-тегов области просмотра

Совет. Если вы просматриваете эту страницу с помощью телефона или планшета, вынажмите на две ссылки ниже, чтобы увидеть разницу.

Без метатег области просмотра С метатегом области просмотра