Firefox Mobile-specific CSS_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-02-08 08:33 出处：网络

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] }

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