1

Firefox 中的响应式设计视图在测试宽度内包含一个垂直滚动条，与没有滚动条的真实移动设备相比，这使得预览网站有点不舒服。所以我加了

html{ overflow-y: hidden; }

到我的 CSS。虽然这非常适合桌面测试、我检查过的所有 iOS 设备以及大多数 Android 设备，但它在 Windows Phone 8 上的 IE10 中完全搞砸了网站：当您使用导航和表单时，页面开始疯狂跳跃，有时甚至显示一个空白屏幕，如果您稍微滚动一下就会消失。

由于我在一个相当复杂的网站上工作，我花了几天时间才弄清楚这个问题，所以只是想让大家知道谁有类似的问题。

在 Firefox 中使用响应式设计视图时如何防止这种情况发生？

同时，我已经切换到响应式预览小书签（http://lab.maltewassermann.com/viewport-resizer/），它无论如何都不会显示滚动条。Mozilla 似乎在即将发布的第 22 版 ( http://www.youtube.com/watch?v=SGCbIMH3gMM ) 中通过“移动滚动条”解决了这个问题。

4

2 回答 2

2

据我了解，专门为 Mozilla 编写样式将解决此问题。

eg: @-moz-document url-prefix() 
    {
        html{ overflow-y: hidden; }
    }

将专门用于 mozilla 的代码放在样式表的底部。

于 2013-08-08T16:52:51.160 回答
0

Firefox 根据操作系统偏好显示滚动条。如果您使用的是 Mac OSX Mountain Lion (10.8)，请打开System Preferences > General并选择Show scroll bars...When scrolling。

我记得，这是安装 Mountain Lion 时的默认设置。当我第一次升级时，我切换到总是显示滚动条，以避免模糊滚动区域的内容。我可能宁愿在虚拟机中进行测试，也不愿更改我的操作系统设置。

于 2013-10-18T01:29:08.310 回答