0

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

整个网站可以在计算机上正常显示（示例浏览器宽度为 480 像素），但在我的手机上查看时会在右侧留出空间（无论我使用的浏览器如何）。所以整个网站看起来不错，但你可以滚动“离开网站”。

我首先尝试禁用水平滚动，所以我加入了这一行：

<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;
}

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

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

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

4

1 回答 1

1

如果您希望您的布局适合移动设备，最好从一开始就考虑这一点。因此，例如，如果您要在元素上设置固定宽度（我不建议这样做），例如——</p> 

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

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

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

于 2013-07-31T23:01:59.147 回答