77

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

4

5 回答 5

77

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

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

if (typeof window.innerWidth != 'undefined')
 {
      viewportwidth = window.innerWidth,
      viewportheight = window.innerHeight
 }
于 2010-05-30T17:58:20.467 回答
12

我认为这ViewPort只是在浏览器中显示 Web 内容的区域。并且不同的浏览器对 的大小有自己的设置ViewPort，例如ViewPortSafari 的默认宽度是 980 像素。所以，如果你想看到的实际网页小于 980 像素，那么在 Safari 中访问网页时，默认情况下 Safari 中应该有一个空白显示区域。因此，这就是有时我们需要ViewPort在浏览器中配置更好的 Web 内容显示的原因。

如下所示，例如：

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

也请阅读保罗的回答。我想他已经解释了ViewPort.

于 2015-01-10T12:48:42.103 回答
8

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

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

于 2013-10-24T13:36:47.877 回答
0

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

于 2017-03-26T05:38:53.067 回答
0

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

于 2020-08-16T06:34:08.253 回答