Question

首先要感谢任何回应。我敢肯定，对于CSS向导而言，这是毫无道理的，但是对我来说，这绝对不是我的经验，因此是个问题。

在我的网站上，突然有一个水平滚动出现在移动设备上（以前不存在，因此没有编辑CSS）。

除了检查手机外，我还通过模拟器@ http://mobiletest.me/进行检查（似乎平板电脑上也有）。有人知道如何解决这个问题吗？

不确定是不是某些WP插件或主题与WP的较新版本怪异地工作，但基本上这是CSS文件的内容（相当大）。

https://justpaste.it/8v9yy（应易于搜索和阅读）。我想把它放在这里，但空间不足。

谢谢！

Answer 1

更新：在浏览并测试了CSS之后，看起来网站在进行以下更改时会按照您希望的方式运行：

@media screen and (min-width: 320px) { /* do the same thing for (min-width: 480px) */
    .typology-section {
        /* this makes all the text fit in the view */
        width: 80%; 

        /* the ad is wide, so this cuts it off at a certain point so no need to scroll */
        overflow-x: hidden; 
    }
}

我通过使用Firefox的开发工具来选择一个元素（当您在“检查元素”面板中时选择ctrl + shift + c）来发现这一点，即离开视图，单击它并在其中编辑CSS该小组来查找导致问题的原因。

原始答案

我尝试了一下，看起来页面顶部的广告占据了很多水平空间并强制使用水平滚动条。您可以尝试使用CSS操纵广告吗？如果是这样，我会做这样的事情：

@media screen and (min-width: 350px) { //350-400px is roughly the width of most phones
    .advertisement {
        max-width: 300px;
    }
}

这使得当屏幕达到一定宽度时，会将最大宽度应用于广告。

顺便说一句，如果您使用的是Chrome，则可以通过打开Inspect Element（ctrl + shift + i），然后切换设备工具栏（ctrl + shift + m）来查看移动视图。只是想把它扔在那里，以减轻检查移动视图的工作量！

Answer 2

虽然可能还有其他问题导致该问题，例如元素超出了身体，但是您可以通过隐藏溢出的元素来解决问题。

body, html {
    overflow-x: hidden;
    max-width: 100%;
}

注意：：如果页面中的元素溢出，则将其切断。因此，您必须通过执行以下操作来确保它们不会溢出：

.innner-element {
max-width: 100%; /* Ensures that it doesn't extend beyond its parent */
}

移动设备上出现水平滚动

2 个答案: