html - 在移动设备上查看网站需要水平滚动

Question

我有一个基于 Wordpress 的网站，出于某种奇怪的原因，当我通过 iPhone 或任何其他移动设备打开它时，我只能看到网站的背景，而且只有向右滚动很多才能看到完整的网站。

我附上了一个截图，所以你们都可以明白我的意思，或者只是尝试打开http://sivantalmor.com并自己查看。

我可以使用 CSS 来解决这个问题吗？

Answer 1

我不是 100% 确定是什么原因造成的，但这似乎有效：

将overflow-x: hidden;属性添加到您的 div#main

像这样：

<div id="main" role="main" style="overflow-x: hidden;">
</div>

编辑：

问题在这里：

<div class="audio-player" style="direction: ltr;"></div>

您可以删除direction: ltr;导致这一切的原因。但是，您必须为包裹相册照片的元素修复一些边距。

Answer 2

确切的问题在于音频播放器部分（#soundcheck_audio_player_widget-2）。内部是链接 .jp-pause，它位于左侧 div 之外的宽处。这会导致页面在左侧生成一个长滚动条。您可以添加溢出：隐藏；到这个类：.jp-controls-wrap

.jp-controls-wrap {
  overflow: hidden;
}

它成功了！