假设我有以下标记：
1100px我已将固定宽度html设置为<meta name="viewport" content="width=2200, initial-scale=1">元素。现在，当我在谷歌浏览器响应设备工具栏中打开此文档并尝试减小屏幕的宽度然后在我低于1100px后，整个网站开始挤压。如果我这样做
html
然后，无论elements和其他width=2200的宽度如何，网站都会在2200px以下开始徘徊。 viewport tag的{{1}}是否强制浏览器认为html代码的宽度为2200px，因此应该开始在2200px以下进行挤压？
答案 0 :(得分：0)
这次似乎我的理解是正确的。
每个浏览器都会在其上呈现视口上的每个网页。在桌面屏幕上，视口与浏览器窗口相同。但是在移动视口上，宽度和高度分别与浏览器的宽度和高度不同。为了详细阐述原因，请考虑第一种情况：
html文档宽度为800 css像素：假设我们要在iPhone5上打开此网页。 iPhone 5的宽度为320 css像素。现在要显示800px宽的网页它的作用，它首先假设像桌面屏幕980 css px宽。它在这个虚构的屏幕上呈现800px宽的页面。让我们将这个虚构的屏幕称为 viewport 。现在，iPhone 5将这个想象中的屏幕缩小了320/980倍，即宽度为490 css像素的div将像{i}的一部分 - iPhone的屏幕的一半。除了div之外，文本的字体大小也将减少相同的因素。现在让我们进入下一个案例。
html文档宽度为1170 css像素：假设我们想再次在iPhone5上打开此网页。这次iPhone无法在980 css px宽视口上渲染网页。通常，当网页大于980 css px时，iPhone会将页面呈现在与网页宽度相同的假想屏幕上。所以这次iPhone创建了它的视口1170 css px。之后，它会按490 * (320/980) = 160px缩小视口，并在其屏幕上显示此页面。包括字体大小在内的所有内容都会减少相同的因素。
现在让我们回到问题中提到的具体问题。
视口标记的宽度= 2200是否强制浏览器认为html标记的宽度为2200px所以它应该开始在2200px以下压缩？
不，它迫使移动（平板电脑）浏览器认为视口的最小宽度为2200 css px宽。现在，当我将谷歌浏览器响应工具栏宽度超过2200像素，比如2400px时，视口也变为2400px宽，当响应工具栏宽度超过2200像素时，它不会缩小网页。当工具栏低于2200时，它会立即开始挤压视口，因为视口的最大宽度为2200px。
答案 1 :(得分：-2)
令人惊讶的是，实际上实现的视口标记是它在网页上启用媒体查询。如果我使用媒体查询以及视口标记使用以下媒体查询：
@media (max-width: 800px) {
* {
width: 200px !important;
}
}
然后wepage不会挤压小于800px的屏幕尺寸。请注意，没有视口标记的媒体查询在800px以下不会执行任何操作。那么浏览器通常会做的是，如果他们看到网页的宽度大于视口宽度，那么他们会挤压网页 - 这很好。视口标签不应该阻止浏览器的这种内在能力 - 但不知何故阻止浏览器挤压 980px 以下，并且仅当视口宽度小于网页宽度时才使其挤压..它允许我们使用媒体查询，通过它我们可以为不同的元素赋予不同的宽度。它还提供其他功能，例如禁止用户按user-scalabilty放大/缩小，更改外观视口大小等。