Question

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）中使用“移动滚动条”来解决这个问题。

Answer 1

根据我的理解，专门为mozilla编写样式将解决这个问题。

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

将专门针对mozilla的代码放在样式表的底部。

Answer 2

Firefox根据操作系统首选项显示滚动条。如果您使用的是Mac OSX Mountain Lion（10.8），请打开系统偏好设置＆gt;常规并选择显示滚动条...滚动时。

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