Firefox移动特定CSS

我一直在安卓浏览器上测试我网站的移动版本。我的做法是：

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

现在，我已经开始在Firefox移动测试版中进行测试，有一个特定的元素我无法在股票浏览器和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文档规则放在@媒体规则之外，它工作得很好，但会影响桌面Firefox和移动设备。不过，将@media嵌套在@moz文档中并没有这样做

---

是否有任何有效的方法只针对使用CSS的Firefox Mobile？

BoltClock似乎是正确的。仅仅使用CSS是无法做到这一点的

我不得不把这个

放在我的页面的

中：

if（navigator.userAgent.indexOf（'Fennec'）！=-1）{
文件。写（'
@仅介质屏幕和（最大设备宽度：480px）{
#共享框{左边距：-30%；}
}');}

---

这很有效。

这对我来说非常有效

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

使用

---

这似乎适用于相对较新的

指针

媒体查询：

@-moz文档url-prefix（）{
@介质（指针：粗略）{
/*风格*/
}
}
这里的问题是，Firefox似乎无法在这样的规则下嵌套：（你应该在代码< <代码> >中使用<代码> 'TouthCurn'。如果 Stand，它的目标是移动和桌面FF。考虑代码的描述，以便人们能够清楚地了解它。这只适用于FF Mobile 73。至少在Firefox移动测试版（80版）中，“-moz touch enabled”不再受支持，
 @media only screen and (min-width:320px){ // media query 
     @-moz-document url-prefix() { // target FF
         .selector { // Voila
             my: styles;
         }
     }
 }

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