昨天我观察到一些非常奇怪的行为，并就此写了一个looooong问题。正如@tacoshy正确指出的那样，这个问题缺乏重点。因此，在这篇文章中，我将专注于一个问题：
为什么在Chrome开发者工具中，关闭窗口的行为与关闭“响应框”的行为不同？
前言
<head>-元素包含以下viewport元标记
<meta name="viewport" content="width=device-width, initial-scale=1" />字符串
在下面显示的任何视频之前，以下内容都已在Chrome-devtools中执行Settings > Preferences > Reset defaults and reload个
和The kebab-icon in the responsive view > Reset to defaults个
应用。
代码可以在here中找到。它已经部署并且可以在here中检查。
一个React应用程序，当resize-event触发时，它的状态（windowWidth）会更新为window.innerWidth。我还有一个容器div，min-width设置为windowWidth。简而言之，容器应该始终具有与window.innerWidth相同的min-width。容器包含一个div，min-width静态设置为400 px。
行为
当我只打开Chrome开发工具并通过更改开发工具的宽度来调整可见窗口的大小时，观察到的行为如下：
x1c 0d1x的数据
window.innerWidth对应于窗口的大小。- 比例（从
window.visualViewport.scale开始）保持为1。
现在，我们尝试在Chrome开发者工具响应模式：
的
- 宽度保持不变（781 px）
- 视口的整个比例缩小。
进一步调查
window.visualViewport.width将产生几乎相同的行为- （除了宽度有时会变为小数点值）
window.screen.width将产生不同但也是错误的行为：
的
- 布局不会中断，直到屏幕变得小于青色元素（在头部，最小宽度：400 px）。然后容器似乎缩小得更快，在这一点上，我们也可以看到规模开始下降。
- 将
windowWidth静态设置为100 vw会产生与上面完全相同的行为。
异常行为解决方案
上面所有关于布局中断的例子都有一个共同点：比例开始下降，而不是视口的实际宽度。所以可以想象，更新视口元标记以包括minimum-scale=1可以解决这个问题，而且它确实解决了！使用
<meta
name="viewport"
content="width=device-width, initial-scale=1, minimum-scale=1"
/>型
产生以下行为：
型
正如你所看到的，Scale仍然是1，布局没有中断。事实上，添加minimum-scale=1会使innerWidth、visualViewport.width和screen.width在Chrome开发人员工具的响应视图中产生相同的预期行为。
不幸的是，解决这个问题不是问题，问题是，仍然是：
为什么在Chrome开发者工具中，关闭窗口的行为与关闭“响应框”的行为不同？
编辑
当在Firefox开发者工具响应视图中查看页面时，这种奇怪的缩放行为不会被反映出来。
x1c4d 1x的
编辑2
类似问题
Does Mobile View in Chrome-Dev-Tools force scaling?的
完全相同的问题，通过添加元标记来解决：
<meta name="viewport" content="width=device-width, initial-scale=1.0">型
这显然在2020年1月解决了这个问题，但今天并没有解决这个问题（正如我们可以看到here）。
Resize Chrome responsive mode window without changing scale的
还通过添加以下内容解决：
<meta name="viewport" content="width=device-width, initial-scale=1.0">型
这一次已经出现了。
Why is Chrome shrinking the view in responsive mode?
和我的完全一样的行为，但选择的解决方案是jQuery hack。poser还提到了一个类似的缩放问题，当倾斜你的手机，然后再倾斜回来，我也经历过（当添加minimum-width=1到viewport metatag时，它消失了）。
摘要
看起来这个问题过去是通过添加
<meta name="viewport" content="width=device-width, initial-scale=1.0">型
但现在需要
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">型
我的问题仍然是
- 他们为什么要改变这一点？
- 开发人员在修改响应窗口时更改页面的比例有什么用？
- 这是一个功能还是一个bug？
编辑3
另一方面，边缘似乎反映了这种行为。
型
1条答案
按热度按时间ss2ws0br1#
关于这个问题有很多事情在发生，所以很难回答。但是，在我自己研究之后，（当我今晚遇到同样的问题时），我发现下面的细节有些有用。我认为浏览器近似于移动的设备的默认行为，当没有“Meta视口”标签时，在某种程度上，这是一种“最大的努力”，它模拟了试图处理面向桌面的页面的设备行为。也许这会有所帮助：
1.无响应站点的默认视口宽度：移动的浏览器使用比设备的实际屏幕宽的默认视区宽度，通常在800到1024像素之间，980像素是一个常见的默认值。当网站没有任何说明时使用此宽度（像
viewportMeta标签）告诉浏览器如何缩放或调整不同屏幕尺寸的内容。1.默认宽度的用途：选择此默认宽度是为了接近桌面网站的典型宽度。如果没有它，非响应网站（为桌面设计）将显得非常小，并且难以在移动的设备上阅读。浏览器基本上将页面呈现为就像在更宽的屏幕上一样，然后将其缩小以适应移动的屏幕。
1.设备模拟的效果：在Chrome DevTools中使用设备模拟时，如果没有响应
viewportMeta标记，您可能会注意到内容会缩放，就像在980像素宽的屏幕上呈现一样。这是因为模拟模拟的是移动的浏览器处理无响应站点的行为。1.响应式设计和视口Meta标签：在响应式网站中，
viewportmeta标签（<meta name="viewport" content="width=device-width, initial-scale=1">）指示浏览器使用实际设备宽度进行渲染，而不是默认的980像素。该标签确保内容的大小和缩放适合设备，无需使用默认宽度。老实说，我认为Chrome（和Firefox等）团队应该在他们提供的模拟行为上更详细，但理解有一个“我们会尽我们所能”没有“Meta视口”标签对我很有帮助。一旦设置了
<meta name="viewport"...，它应该会更一致地播放。