我一直在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？
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>');}
那很有效。
这对我很有用。
@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
}