2

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

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

现在，我已经开始在 Firefox Mobile 测试版中对其进行测试，并且有一个特定的元素我在普通浏览器和 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 吗？

4

4 回答 4

1

利用

@media (-moz-touch-enabled){
    //style for FF with touch
}
于 2018-03-06T14:01:01.283 回答
1

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

@-moz-document url-prefix() {
    @media (pointer:coarse) {
        /* styles */
    }
}
于 2021-01-07T10:17:55.203 回答
0

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>');}

那行得通。

于 2011-02-04T16:54:51.353 回答
0

这对我来说非常有效。

 @media only screen and (min-width:320px){ // media query 
     @-moz-document url-prefix() { // target FF
         .selector { // Voila
             my: styles;
         }
     }
 }
于 2016-07-08T15:20:02.990 回答