元视口标签是如何使用的，它有啥作用？
Posted
技术标签:
【中文标题】元视口标签是如何使用的，它有啥作用？【英文标题】：How is the meta viewport tag used, and what does it do?元视口标签是如何使用的，它有什么作用？ 【发布时间】：2012-06-09 04:26:09 【问题描述】：-
哪些浏览器支持此元标记？
如何使用它？
这是否意味着它将解决我所有的移动设备大小调整问题？
如果有人能回答这个问题对新手学习有很大帮助
<meta="viewport">
【问题讨论】：
【参考方案1】：-
视口浏览器支持有点全面。我会将您指向Quirksmode page for viewport browser support 以了解详细信息。
您可以像使用任何其他元标记一样使用视口元标记。将代码块直接放在
<head> 中。
差不多了，但在这里还是有点拗口。我建议reading some articles、reading the W3 mobile best practices for web design 或the current W3 draft specifications on the viewport attribute for the <meta> tag。
简而言之，将这一行添加到应该实现视口缩放的网站应该可以解决大多数问题。 （复制自WebDesignTuts+'s "Quick Tip: Don't Forget the Viewport Meta Tag" article）
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">附： Quirksmode 也有 a rather wonderful article describing the issue 值得一读以了解为什么这可能会有所帮助。
【讨论】：
很棒的文章。一个小问题。当他们说“灵活设计”时，这是否意味着所有尺寸（宽度和高度）都以百分比 (%) 为单位？ 我相信它只是指responsive web design的概念，所以它并不一定意味着宽度和高度将以百分比为单位，而是意味着该网站旨在被查看舒适地在各种尺寸的屏幕上。碰巧在本文给出的示例中，它可能既是媒体查询又是基于百分比的宽度。【参考方案2】：另一篇关于元视口、它的各种属性以及如何在您的设计中使用它的文章是http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/
还有一个slidedeck 详细解释了事情，还有一个Github repo 与之配套。
免责声明：我是这些资源的作者。
【讨论】：
【参考方案3】：您可以从 Mozilla 博客查看所有详细信息
https://developer.mozilla.org/en-US/docs/Web/html/Viewport_meta_tag
【讨论】：
【参考方案4】：元视口标签用于根据查看屏幕的大小调整网站的大小和可见性。它有助于网页自动适应安卓、平板电脑或 iPhone。
【讨论】：
以上是关于元视口标签是如何使用的，它有啥作用？的主要内容，如果未能解决你的问题，请参考以下文章