什么是HTML中的视口。

时间:2010-05-30 17:57:46

标签: javascript html viewport

HTML中的视口是什么?您能举例说明如何访问视口详细信息吗?

5 个答案:

答案 0 :(得分:66)

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

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

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

答案 1 :(得分:12)

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

如下所示,例如:

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

另请阅读Paul's answer。我想他已经解释了ViewPort的用法。

答案 2 :(得分:6)

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

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

答案 3 :(得分:0)

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

答案 4 :(得分:0)

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