Firefox Mobile-specific CSS
I've been testing a mobile version of my website on the Android browser. The way I do it is with:
@media only screen and (max-device-width: 480px) { [my mobile CSS] }
Now, I've started to test it out in the Firefox Mobile beta, and there's one specific element which I can't get to look right in both the stock browser and Firefox; stock requires margin-left: 23% (which Firefox renders too far right), and Firefox requires margin-left: 30% (which stock renders too far left). I've experimented with px values, and the same problem occurs.
So, what I've tried to do is:
@media only screen and (max-device-width: 480px) {
[my mobile CSS]
@-moz-document url-prefi开发者_Python百科x([the domain]){ [Firefox Mobile adjustment] }
}
This doesn't work.
If I put the @-moz-document rule outside of the @media rule, it works perfectly, but affects desktop Firefox as well as mobile. Nesting @media inside of @-moz-document, though, doesn't.
Is there any working way to target only Firefox Mobile with CSS?
use
@media (-moz-touch-enabled){
//style for FF with touch
}
This now seems to work with the relatively new pointer media query:
@-moz-document url-prefix() {
@media (pointer:coarse) {
/* styles */
}
}
BoltClock seems to be right. There's no way to do this with just CSS.
I had to put this <script> in my page's <head>:
if (navigator.userAgent.indexOf('Fennec') != -1) {
document.write('<style>
@media only screen and (max-device-width: 480px) {
#sharebox{ margin-left:-30%;}
}</style>');}
That worked.
This worked perfectly for me.
@media only screen and (min-width:320px){ // media query
@-moz-document url-prefix() { // target FF
.selector { // Voila
my: styles;
}
}
}
加载中,请稍侯......
精彩评论