javascript - 网站的移动版本不适合水平

Question

我正在尝试制作我网站的移动版本，但遇到了一个问题:

整个网站在计算机上完全适合(例如浏览器宽度为 480px)，但在我的手机上查看时(无论我使用的是什么浏览器)在右侧留有空间。所以整个网站看起来不错，但您可以滚动“离开网站”。

我首先尝试禁用水平滚动，所以我包含了这一行:

<meta name="viewport" content="width=device-width; initial-scale = 1.0; maximum-scale=1.0; user-scalable=no" />

为了禁用右侧的(仍然可滚动!)空间，我将其添加到我的“mobile.css”:它在计算机上有效，但在我的手机上无效。

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

• 我的网站在这里可用:my mobile website
• 我的 mobile.css 文件位于此处:my "mobile.css"

我已经在以下移动浏览器上测试了该网站:

• 谷歌浏览器
• 海豚
• 默认的安卓浏览器

我本来想避免使用 Javascript，但如果有 javascript 解决方案，请不要犹豫发布!

Answer 1

如果您希望您的布局适合移动设备，最好从一开始就考虑这一点。因此，例如，如果您要在元素上设置固定宽度(我不推荐)，例如 —

#back-menu-left {with: 500px;}

你需要问问自己在小屏幕上会发生什么。因此，要么不设置该宽度，要么立即编写一个 @media 规则以在较小的屏幕上覆盖它。

(我没有检查您的其余代码，只是在发现一个超大元素时停下来。最好检查一下是否还有其他类似的超大元素。)