什么是HTML中的视口。


Answers:


75

视口是用户当前可以看到的网页的一部分。滚动条移动视口以显示页面的其他部分。

请按照本文的说明在Javascript中获取视口尺寸

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

24
为避免混淆,它既不是浏览器窗口的大小也不是屏幕分辨率。对于相同的窗口大小,显示更多工具栏的浏览器将具有较小的视口。
FelipeAls

应用于transform: translate3d(0,0,0)任何元素都会使其成为所有子元素的视口。这使得该答案部分不正确。

视口与滚动条如何相关?是否包括它们,还是取决于浏览器?
Paul Razvan Berg,

12

我觉得 ViewPort只是在浏览器中显示Web内容的区域。并且不同的浏览器都有各自的大小设置ViewPort,例如ViewPortSafari的默认宽度为980像素。因此,如果您要查看的实际网页小于980像素,则默认情况下在Safari中访问网页时,Safari中的显示区域应该为空白。因此,这就是有时我们需要配置ViewPort以便在浏览器中更好地显示Web内容的原因。

例如,如下所示:

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

另外,请阅读保罗的回答。我认为他已经解释了的用法ViewPort


8

视口是浏览器渲染引擎用来确定内容在最初在当前屏幕上呈现时如何缩放和调整大小的虚拟区域。这将帮助您:

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


0

视口是浏览器上网页的可视区域。使用<meta name="viewport"可以设置网站内容在不同设备上的呈现方式。我个人喜欢使用: <meta name="viewport" content="width=device-width, initial-scale=1.0>


0

视口区域是设备上用户可见的区域,meta标记用于根据视口设置页面内容宽度,以便页面的内容将根据视口宽度缩小或放大。MDN上的一个很好的解释[https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag]。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.