什么是屏幕的宽度？ 100VW vs InnerWidth vs VisualViewPort.Width vs Screen.width（react）

Question

您可以想象，我正在尝试使我的网页响应迅速且移动友好。

我有一个外部容器，在该容器上，我在该容器上动态设置宽度使用此挂钩（window.innerwidth）。因此，要测试页面是否响应响应，我打开Chrome-devtools并开始使DevTools更宽：

确保有点跳跃，但是它会按照预期的方式正确缩放。当我打开以在响应式工具中执行相同操作时，问题开始：

突然间整个页面缩小？另外，很难看到，但是我正在记录window.innerwidth，并且在我更改宽度时并没有改变。

因此，我在手机上尝试一下，并且行为确实是出乎意料的：

负载看起来还不错

仍然按预期翻转电话，但是当我何时翻转回去？？？

”

这种疯狂的效果发生了，我的意思是现在看起来像窗口。Innerheight也遇到了一些麻烦？因为带有灰色背景颜色的容器的最小高度设置为窗口。Innerheight。如果我尝试转到应用程序的其他页面，然后返回，我得到了：

它是最后一个图像的缩放。我可以从中缩成一团。

所以我在Google周围进行了搜索，看来我找到了有相同问题的人 a 详细答案建议我应该使用window.visualviewport.width.width而不是。因此，我尝试一下：

主要差异，调整大小似乎有点跳跃。我还记录了window.visualviewport.width，它正在更改，但仅略微，它不与屏幕上方所示的响应性宽度相对应。

但最重要的是，不幸的是，这并没有解决整个屏幕大小的问题，并且在移动设备上的意外行为仍然存在。 （应该提到的是，如果我不处于“响应模式”，而只是调整窗口大小。

所以我发现另一个答案进一步向下建议使用window.screen.width，所以我尝试一下：

，引入了a thoter 新型怪异的范围？比屏幕快的速度

似乎与标题具有CSS的事实有关 网格 - 板块列：130px auto 130px;。如果我降低130px - 值，则标题也将降低的点。我想使屏幕在标题下方的最小宽度以下会导致一些（我认为）确实出乎意料的行为。

尽管控制台日志（现在记录window.screen.width，现在正确打印了Chromes响应工具报告的宽度。该错误可以在我的手机中看到，

此处猜猜我的手机的宽度必须低于300个像素

。 屏幕之间的差异， innerwidth 和visualViewport.width，如果我将响应窗口的大小设置为500px并重新加载窗口。 屏幕的任何值

所有这些都将屏幕设置为到响应窗口的宽度。
InnerWidth和VisualViewport.width均应评估为309px（我认为这是标头的最小功能宽度。

如果我们查看innerwidth如何和VisualViewPort.Width在我的电话上外观：

在visualviewport.width.width和innerwidth我们可以看到与一条类似于一行的行 截图中看到它）。

screen.width（在此处可以在屏幕 img src =“ https://i.sstatic.net/6fwrkm.jpg” alt =“在此处输入图像说明”>

第一个解决方案

，因此第一个也是最直接的解决方案是使用窗口。 ），只需确保没有元素将自己推到屏幕的宽度之外

screen.width （或100VW

。 “ https://stackoverflow.com/questions/36297612/window-innerwidth-innerwidth-in-chromes-device-mode#comment12329501_36317697">视口元标记从

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

所有

<meta name="viewport" content="width=device-width, minimum-scale=1" />

替代方案，screen.width，innerwidth和visualviewport.width.width现在彼此之间的行为相同， ：

他们都记录了响应窗口的正确宽度，我的手机上的页面也可以工作。如果仔细观察，您会发现当屏幕驶入309阈值以下时，标头确实会被切断。但是，使用此解决方案似乎比第一个解决方案更优雅地破裂。

因此，如果您已经解决了问题，为什么要发布此问题？

好吧，正如您现在可能已经了解的那样，我喜欢这个问题，而不是喜欢解决方案。也就是说，我真的很想知道为什么这种解决方案有效？因此，即使解决了我的“实用”问题，我对剩下的一些谜团也很好奇：

1. 为什么调整窗口（第一个视频）的行为与调整Chrome Dev工具中的“响应式盒子”的行为有所不同？
2. 当我倾斜手机时，为什么该错误会出现在我的手机上，然后再次将其倾斜？ （第三张图片）
3. 为什么（在电话上）回到某个页面并再次返回时，屏幕超级放大了？ （第四个图片）
4. 为什么innerwidth和visualViewport.width在调整响应式窗口时继续打印相同的值。
5. 他们为什么要奇怪地缩放整个屏幕，而不是以预期的方式更改屏幕的大小（由于某种原因使响应式窗口较小时会放大？代码>解决问题了吗？）
6. 为什么screen.width与innerwidth和visualviewport.width.width的行为不同？为什么在低于标头的最小宽度时会引起如此怪异的白色空间效果？
7. 是否有任何理由不想设置最小规模= 1？