我找不到导致手机溢出的原因答案

【问题标题】：I cant find what causes overflow on mobile我找不到导致手机溢出的原因
【发布时间】：2023-02-08 19:45:26
【问题描述】：

我在 wordpress 中构建了标题和部分英雄。我使用了干净的代码，但在移动设备上出现了溢出。总是在 devtools 中，有时在我的手机上。很难找到它，因为当您编辑或删除 devtools 中的任何元素时，溢出消失了。 https://fisite.pl/page/

【问题讨论】：

【解决方案1】：

有时 Chrome DevTools 可能有点问题。我建议首先尝试在 Firefox DevTools 中重现该问题。

溢出的原因可能有很多 - 检查具有固定大小的width-size、position: absolute 和其他可能导致溢出的 CSS 属性的元素。

一种解决方案是在 CSS 中为所有元素添加边框——这样您就可以选择直观地查看是否有溢出的内容。

* {
    border:1px solid red !important;
}

如果你有一个比较小的页面，你可以使用 Chrome DevTools 单独删除元素。继续对您怀疑可能导致溢出的元素执行此操作，直到您的站点不再溢出为止。然后你就会知道是什么元素导致了溢出：

希望这可以帮助！

【讨论】：

【解决方案2】：

您可以在样式表中添加以下类。

.ct-section, .ct-inner-content{
    overflow:hidden;
}

【讨论】：

【解决方案3】：

除了上述答案之外，另一件要检查的事情是像 ::before 这样的伪元素的样式规则。（宽度、填充、边距）

使用上述技术在开发人员工具中很难发现伪元素的问题。

另一个修复是：

@media only screen and (max-width: 768px){
    html,
    body{
    width:100%;
    overflow-x:hidden;
    }
}

【讨论】：