视口和响应式 Web 的区别答案

【问题标题】：The difference between viewport and responsive web视口和响应式 Web 的区别
【发布时间】：2015-08-19 18:41:51
【问题描述】：

我想知道<meta name='viewport'> 和使用 CSS 媒体屏幕的响应式网页设计有什么区别？

因为这两件事在功能上看起来很相似。

无论有没有<meta name='viewport'>，只要设置Media Screen，我仍然可以为不同的屏幕尺寸设置不同的布局，并且布局会自动检测屏幕尺寸然后设置匹配的布局

【问题讨论】：

viewport 元标记告诉浏览器如何正确呈现页面——在手机和平板电脑等较小的屏幕上尤其有用。您可以设置将呈现内容的初始比例，可以禁用/启用缩放，可以单独设置视口的初始宽度和高度。所有这些因素都有助于设计师为移动设备指定特定的布局。
阅读更多相关信息here、here、here 和 here。

【解决方案1】：

Viewport 元标记几乎使用了一些其他选项，例如：

<meta name="viewport" content="width=device-width, initial-scale=1, , maximum-scale=1">

通过这些选项，您可以为您的响应式网站定义一些行为。使用不带选项的<meta name='viewport'> 不会对您的网站产生任何特殊影响，尽管它仍然可以响应。

【讨论】：

【解决方案2】：

<meta name="viewport"> 告诉小屏幕浏览器如何将 CSS 像素映射到真实像素。从本质上讲，它是对浏览器说“我们已经费心关心手机大小的屏幕，不要缩小”。

这是（合理地）实施响应式网页设计的先决条件，而不是替代方法。

【讨论】：