Javascript 什么是 HTML 中的视口。
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2939693/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What is viewport in HTML.
提问by minil
What is viewport in HTML? Could you give some examples on how to access the viewport details?
什么是 HTML 中的视口？您能否举例说明如何访问视口详细信息？
回答by Matchu
The viewport is the part of the webpage that the user can currently see. The scrollbars move the viewport to show other parts of the page.
视口是用户当前可以看到的网页部分。滚动条移动视口以显示页面的其他部分。
Follow this article's instructions to get the viewport dimensions in Javascript.
if (typeof window.innerWidth != 'undefined')
{
viewportwidth = window.innerWidth,
viewportheight = window.innerHeight
}
回答by Joe.wang
I think the ViewPortis just an area to display the web content in the browser. And different browsers have their own setting for the size of ViewPort, For example, the default ViewPortwidth of Safari is 980 pixels. So, if the actual web page you want to see is smaller than 980 pixels, there should be a blank display area in the Safari when accessing the web page in the Safari by default. Hence, that is the reason sometimes we need to configure the ViewPortfor better web content display in the browser.
我认为这ViewPort只是在浏览器中显示 Web 内容的一个区域。并且不同浏览器对 的大小有自己的设置ViewPort，比如ViewPortSafari的默认宽度是 980 像素。所以，如果你想要查看的实际网页小于980像素，默认情况下在Safari中访问网页时，Safari中应该有一个空白的显示区域。因此，这就是有时我们需要配置ViewPort更好的 Web 内容在浏览器中显示的原因。
Like below, for example:
像下面这样，例如：
<meta name="viewport" content="width=device-width">
And also please read Paul's answer. I think he already explained the usage of ViewPort.
也请阅读保罗的回答。我想他已经解释了ViewPort.
回答by vicky
The viewport is a virtual area used by the browser rendering engine to determine how content is scaled and sized when it is initially rendered on the current screen. This will help you:
视口是浏览器渲染引擎用来确定内容在当前屏幕上初始渲染时如何缩放和大小的虚拟区域。这将帮助您：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
回答by aditya
The viewport is the visual area of your webpage on a browser.By using the <meta name="viewport"you can set how the content of your site is rendered on different devices.
Personally I like to use :
<meta name="viewport" content="width=device-width, initial-scale=1.0>
视口是您网页在浏览器上的可视区域。通过使用<meta name="viewport"您可以设置网站内容在不同设备上的呈现方式。我个人喜欢使用：
<meta name="viewport" content="width=device-width, initial-scale=1.0>
