Что такое viewport в HTML.

Question

Что такое viewport в HTML? Не могли бы вы привести несколько примеров того, как получить доступ к сведениям о видовом экране?

Answer 1

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

Follow this article's instructions to get the viewport dimensions in Javascript.

if (typeof window.innerWidth != 'undefined') 
{ 
     viewportwidth = window.innerWidth, 
     viewportheight = window.innerHeight 
} 

Answer 2

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

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

Answer 3

Я думаю, что ViewPort только область для отображения содержимого веб в браузере. И у разных браузеров есть свои собственные настройки для размера ViewPort. Например, ширина по умолчанию ViewPort ширины сафари составляет 980 пикселей. Итак, если фактическая веб-страница, которую вы хотите увидеть, меньше 980 пикселей, в Safari должна быть пустая область отображения при доступе к веб-странице в Safari по умолчанию. Следовательно, по этой причине иногда нам нужно настроить ViewPort для лучшего отображения веб-контента в браузере.

Как ниже, например:

<meta name="viewport" content="width=device-width"> 

А также, пожалуйста, прочитайте Paul's answer. Я думаю, что он уже объяснил использование ViewPort.

Answer 4

Видовой экран - это визуальная область вашей веб-страницы в браузере. Используя <meta name="viewport", вы можете настроить способ отображения содержимого вашего сайта на разных устройствах. Лично я люблю использовать: <meta name="viewport" content="width=device-width, initial-scale=1.0>

Answer 5

Видовой экран является видимой областью видимости пользователя на веб-странице.

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

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

Затем, когда люди начали заниматься серфингом в Интернете с помощью планшетов и мобильных телефонов, веб-страницы фиксированного размера были слишком большими, чтобы соответствовать окну просмотра. Чтобы устранить эту проблему, Mobile Safari представила метатег «viewport meta» (safari documentation), чтобы веб-разработчики контролировали размер и масштаб видового экрана. Многие другие мобильные браузеры теперь поддерживают этот тег, хотя он не является частью какого-либо веб-стандарта.

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

Это будет сказать браузеру, чтобы установить ширину содержимого по ширине самого устройства и масштабировать, что содержание 1 на нагрузке.

Узнайте больше о форме окна просмотра здесь: http://fend-tricks.com/responsive-web-design-with-viewport/