移动版不适合水平

我想产生我的网站的移动版本，但也遇到一个问题：移动版不适合水平

的整个网站的正确贴合在计算机上（用一个例子浏览器的宽度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; 
}

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

我本来想避免使用Javascript，但如果有一个JavaScript的解决方案，请不要犹豫，发布了！

2013-07-31 cdMinix

你来什么解决方案了与，请不要禁用滚动，缩放或平移。这些内置于各种平台的可用性功能非常实用，特别是对于视力不够完美的用户。 – RobG

感谢您提及，至今我还没有想过。唯一的问题是，我不确定是否有可能的解决方案（仅针对移动版本），而不禁用水平滚动。 – cdMinix

我真的不喜欢禁用内置功能的网页，因此是单挑。 ;-) – RobG

如果您希望您的布局适合移动设备，最好从一开始就考虑这个问题。因此，举例来说，如果你要设置的元素固定宽度（我不推荐），如 -

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

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

（我没有通过你的代码的其余部分检查，刚停时，我发现一个超大的元素。最好检查一下，看看是否有像任何其他overwide元素。）

2013-07-31 23:01:59

非常感谢！我已经阅读了许多关于在移动网站上停用滚动和元视口的文章，我完全忘记了@media屏幕！明天我会试一试。 – cdMinix

添加@media唯一屏幕和（min-device-width：481px）到我的主要css文件（不是移动的）。 – cdMinix

回答