Question

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

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

现在，我已经开始在Firefox Mobile测试版中测试它了，并且有一个特定的元素，我无法在股票浏览器和Firefox中看到它;股票需要保证金左：23％（Firefox渲染得太右），Firefox需要保证金左：30％（股票呈现太远）。我已经尝试了px值，并且会出现同样的问题。

所以，我试图做的是：

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

这不起作用。

如果我将@ -moz文档规则放在@media规则之外，它可以很好地工作，但会影响桌面版Firefox和移动版。但是，在@ -moz-document中嵌套@media不会。

是否有任何工作方式只能使用CSS定位Firefox Mobile？

Answer 1

BoltClock似乎是对的。只有CSS才能做到这一点。

我必须将此<script>放入我的页面<head>：

if (navigator.userAgent.indexOf('Fennec') != -1) { 
document.write('<style>
@media only screen and (max-device-width: 480px) {
#sharebox{ margin-left:-30%;}
}</style>');}

那很有效。

Answer 2

这对我有用完美。

 @media only screen and (min-width:320px){ // media query 
     @-moz-document url-prefix() { // target FF
         .selector { // Voila
             my: styles;
         }
     }
 }

Answer 3

使用

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

Answer 4

这现在似乎适用于相对较新的 pointer 媒体查询：

@-moz-document url-prefix() {
    @media (pointer:coarse) {
        /* styles */
    }
}

Firefox Mobile特定的CSS

4 个答案: