<meta width“viewport”content="width=device-width">有什么用？

Question

它已经被问过问题了，但我仍然怀疑。我用html，css和java脚本做了一个网页。当我使用<meta name="viewport" content="width=device-width">时，它仍然和我不使用时一样。所以，我的问题是什么时候是使用<meta name="viewport" content="width=device-width">的正确时机。

还有，伙计们别朝我开枪。我真的需要帮助。

Answer 1

只有当您的网站设计为响应不同大小的视窗时，才应该使用响应式meta标签。

content="width=device-width"将页面宽度设置为跟随设备或视区的屏幕宽度，视设备而定。因此，这基本上意味着浏览器将(可能)以自己的屏幕宽度呈现页面的宽度。(因此，如果屏幕是320px宽，那么浏览器窗口将是320px宽，而不是以缩小的方式显示960px或默认情况下设备执行的任何操作)。

希望这能有所帮助:)

这是很棒的资源：https://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design http://bradfrost.com/blog/post/mobile-first-responsive-web-design/

如果你想了解更多关于它的信息，这里有一组资源：

https://bradfrost.github.io/this-is-responsive/resources.html

Answer 2

一些动态图片来说明基本的元视图。

正如在一条评论中所说，CSS像素和屏幕大小之间存在一些差异。Css Pixel Ratio (或Retina / HD屏幕/无论营销人员如何称呼它)可以帮助您计算元素的可用宽度。

https://css-tricks.com/probably-use-initial-scale1/