HTML中的视口是什么？

Question

什么是HTML中的视口(viewport)? 你能给出一些访问视口细节的例子吗？

- minil

---

额外信息：这里有一篇文章和一张不错的图片测量视口。 - informatik01

“给一些访问视口细节的例子”是什么意思？ - Coleman

http://www.w3schools.com/css/css_rwd_viewport.asp - Davut Gürbüz

Answer 1

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

按照这篇文章的指示，在JavaScript中获取视口尺寸。

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

- Matchu

---

为了避免混淆，这不是指您的浏览器窗口大小或屏幕分辨率。对于相同的窗口大小，显示更多工具栏的浏览器会具有较小的视口。 - FelipeAls

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

视口与滚动条有什么关系？它们是否包含在其中，或者这取决于浏览器？ - Paul Razvan Berg

Answer 2

我认为ViewPort就是浏览器中用于显示网页内容的区域。不同的浏览器对于ViewPort的大小有自己的设置，例如Safari的默认ViewPort宽度为980像素。因此，如果要查看的网页实际宽度小于980像素，则在Safari中访问该网页时应该会出现空白显示区域。这就是有时候需要配置ViewPort以获得更好的网页内容显示效果的原因。

例如下面这样：

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

并且请阅读Paul的回答。我认为他已经解释了ViewPort的用法。

- Joe.wang

Answer 3

视口是浏览器渲染引擎用于确定在当前屏幕上初始呈现内容时如何缩放和调整大小的虚拟区域。以下代码可帮助您实现此目的：

```html ```

- vicky

Answer 4

视口（Viewport）是指网页在浏览器上的可视区域。通过使用标签，可以设置不同设备上网站内容的呈现方式。 个人建议使用以下代码：

- aditya

Answer 5

视口区域是设备上用户可见的区域，meta标签用于根据视口设置页面内容宽度，使页面内容根据视口宽度进行缩放。 MDN上有很好的解释 [https://developer.mozilla.org/zh-CN/docs/Mozilla/Mobile/Viewport_meta_tag]。

- Manoj