css - Firefox Mobile 特定的 CSS

Question

我一直在 Android 浏览器上测试我网站的移动版本。我这样做的方式是:

@media only screen and (max-device-width: 480px) {  [my mobile CSS] }

现在，我已经开始在 Firefox Mobile beta 中对其进行测试，并且有一个特定的元素在标准浏览器和 Firefox 中都无法正常显示； stock 需要 margin-left: 23%(Firefox 渲染太右)，而 Firefox 需要 margin-left: 30%(stock 渲染太左)。我已经尝试过 px 值，并且出现了同样的问题。

所以，我尝试做的是:

@media only screen and (max-device-width: 480px) {
[my mobile CSS]
@-moz-document url-prefix([the domain]){ [Firefox Mobile adjustment] }
}

这行不通。

如果我将@-moz-document 规则放在@media 规则之外，它会完美运行，但会影响桌面Firefox 和移动设备。但是，将 @media 嵌套在 @-moz-document 中不会。

有什么工作方法可以只使用 CSS 定位 Firefox Mobile 吗？

Answer 1

使用

@media (-moz-touch-enabled){
    //style for FF with touch
}