Html 元视口标签是如何使用的，它有什么作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10892463/
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
How is the meta viewport tag used, and what does it do?
提问by Kyle Yeo
- What browsers support this meta tag?
- How do i use it?
- Does this mean it will solve all my mobile resizing problems?
- 哪些浏览器支持这个元标记？
- 我如何使用它？
- 这是否意味着它将解决我所有的移动调整大小问题？
If anyone could answer this it would be a great help to newbies learning
如果有人能回答这个对新手学习有很大帮助
<meta="viewport">
采纳答案by Nightfirecat
- The viewport browser support is a little bit across the board. I'll point you to the Quirksmode page for viewport browser supportfor the full details.
- You use the viewport meta tag like any other meta tag. Put the code block straight up in the
<head>. - Pretty much, but again, a little bit of a mouthful to say here. I'd advise reading some articles, reading the W3 mobile best practices for web design, or the current W3 draft specifications on the viewport attribute for the
<meta>tag.
- 视口浏览器支持是全面的。我将向您指出Quirksmode 页面以获取视口浏览器支持的完整详细信息。
- 您可以像使用任何其他元标记一样使用视口元标记。将代码块直接放在
<head>. - 差不多，但是，在这里要说的有点啰嗦。我建议阅读一些文章，阅读 W3 移动网页设计最佳实践，或当前 W3 中关于
<meta>标签视口属性的规范草案。
In short, adding this line to a website that should implement viewport scaling should fix most problems. (copied from WebDesignTuts+'s "Quick Tip: Don't Forget the Viewport Meta Tag" article)
简而言之，将此行添加到应该实现视口缩放的网站应该可以解决大多数问题。（复制自WebDesignTuts+ 的“快速提示：不要忘记视口元标记”文章）
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">P.S. Quirksmode also has a rather wonderful article describing the issuethat's worth reading to understand why this might be helpful.
PS Quirksmode 也有一篇相当精彩的文章描述了该问题，值得阅读以了解为什么这可能会有所帮助。
回答by andreasbovens
Another article about meta viewport, its various properties, and how to use it in your designs is http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/
另一篇关于元视口、它的各种属性以及如何在你的设计中使用它的文章是http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/
There's also a slidedeckexplaining things in detail and a Github repoto go with it.
还有一个幻灯片详细解释了事情和一个Github 存储库。
Disclaimer: I'm the author of these resources.
免责声明：我是这些资源的作者。
回答by Miqdad Ali
You can view all the details from mozilla blog
您可以从 mozilla 博客查看所有详细信息
回答by Akash Kumar Singh
Meta viewport tag is used to adjust the size and visibility of the website according to the size of viewing screen. It helps the webpage to fit automatically in android, tablet or iphone.
Meta viewport 标签用于根据查看屏幕的大小调整网站的大小和可见性。它有助于网页自动适应 android、平板电脑或 iphone。
