【发布时间】：2021-12-29 11:11:42
【问题描述】：
我有一个奇怪的情况，在移动设备的预览（inspector 中的响应模式）中，网站有一个水平滚动条。这与窗口尺寸无关，因为即使我将移动窗口宽度设置为 20000 像素，它也会损坏，看起来 body{overflow-x:hidden} 停止工作。当我缩小浏览器的窗口时不会发生这种情况，即使在 400px 浏览器的宽度上也可以。
我有<meta name="viewport" content="width=device-width, initial-scale=1">，在 Firefox 中没有问题，但在 Android 上的 Firefox 中已经是同样的问题。
拉伸窗口的东西是少数 ::after 和 ::before 伪元素，它们应该始终是窗口的 100%，但在这种响应式视图的情况下，它们会拉伸网站而不是缩小到窗口大小。
所以你可以在这里看到的例子https://jsfiddle.net/d5L4npv9/1/ 但是将其复制到空的 .html 文件中并在浏览器窗口中正常显示，因为问题出在某个地方，而 JSfiddle 不会重现它。
这是我唯一的提示，伪元素，但为什么它们在正常模式下可以？我认为设备模拟器仅适用于设备屏幕尺寸，但显然它改变了更多。
【问题讨论】：
-
尝试在 stackblitz.io 上重现它
-
请在 SO sn-p 中提供足够的代码，以便我们自己运行以查看问题。没有代码时很难调试某些东西。鼓励您制作一个最小的可重现示例。请看：stackoverflow.com/help/minimal-reproducible-example
-
我已经举了例子，原来它在 中的某个地方，在响应模式下会丢失 overflow-x:hidden。
标签： html css responsive-design viewport