假设我有以下标记:
<!DOCTYPE html>
<html style="background: yellow; padding: 0; margin: 0; width: 1100px;">
<head>
<!--
<meta name="viewport" content="width=2200, initial-scale=1">
-->
</head>
<body>
<div class="container" style="width: 400px; background: red;">
<div style="background: green; width: 300px; height: 200px;">
Here goes my text Here goes my text Here goes my text Here goes my text Here goes my text Here goes my text Here goes my text Here goes my text Here goes my text Here goes my text Here goes my text Here goes my text Here goes my text Here goes
</div>
</div>
</body>
</html>
我设置了固定宽度1100px到html元素。现在，当我在google chrome响应式设备工具栏中打开这个文档并尝试减小屏幕宽度时，当我减小到1100px以下时，整个网站开始挤压。如果我这样做
<meta name="viewport" content="width=2200, initial-scale=1">
然后网站开始压缩在2200px以下，不管html和其他elements的宽度。viewport tag的width=2200是否强制浏览器认为html标签的宽度为2200px，因此它应该在2200px以下开始压缩?
看来这次我的理解是正确的。
每个浏览器在它的视图上呈现每个网页。在桌面屏幕上，视口与浏览器窗口相同。但是移动端视口的宽度和高度不同于浏览器的宽度和高度。要详细说明为什么是这样，请考虑第一种情况:
html文档宽度是800 css像素:假设我们想在iPhone5上打开这个网页。iPhone 5的宽度为320 css像素。现在为了展示800px宽的网页，首先假设它像桌面屏幕一样980 css px宽。它在这个假想的屏幕上呈现800px宽的页面。让我们把这个假想的屏幕称为视口。现在iPhone 5将这个假想的屏幕缩小了320/980倍，也就是说，宽度为490 css像素的div就像490 * (320/980) = 160px的div——iPhone屏幕的一半。不仅是div，文本的字体大小也会减少相同的因素。现在我们来看下一种情况。
html文档宽度为1170 css像素:再次假设我们想要在iPhone5上打开这个网页。这一次iPhone不能在980 css px宽的视口上渲染网页。一般来说，当网页大于980 css px时，iPhone会在一个与网页宽度相同的虚拟屏幕上呈现页面。这次iPhone创建了1170 css px宽的视口。之后，它通过320/1170收缩视口并在屏幕上呈现此页面。包括字体大小在内的所有内容都以相同的比例缩小。
现在让我们回到问题中提出的具体问题。
viewport标签的宽度=2200是否迫使浏览器认为html标签的宽度为2200px，所以它应该在2200px以下开始挤压?
不，它迫使移动(平板)浏览器认为视口的最小宽度是2200 css px宽。现在，当我使谷歌chrome响应工具栏宽度超过2200px时，比如2400px，那么视口也会变成2400px宽，当响应工具栏宽度超过2200px时，它不会缩小网页。
令人惊讶的是，viewport标签实际上实现的是在网页上启用媒体查询。如果我使用以下媒体查询和媒体查询以及viewport标签:
@media (max-width: 800px) {
* {
width: 200px !important;
}
}
则页面将不会挤压屏幕尺寸小于800px。请注意，不带viewport标签的媒体查询在800px以下不执行任何操作。所以浏览器通常做的是，如果他们看到网页的宽度大于视口宽度，他们就会挤压网页——这很好。viewport标签不应该阻止浏览器的这种内部能力，但以某种方式阻止浏览器在980px以下进行挤压，并使其仅在viewport宽度小于网页宽度时进行挤压。它允许我们使用媒体查询，通过它我们可以为不同的元素注入不同的宽度。它还提供了其他功能，如禁止用户通过user-scalabilty放大/缩小，改变视口大小等。