Firefox Mobile-specific CSS

Question

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-prefix([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?

The problem here is that Firefox can't seem to figure out nested at-rules like that :/ — BoltClock, Feb 02 '11 at 18:45

score 1 · Answer 1 · answered Mar 06 '18 at 14:01

1

use

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

answered Mar 06 '18 at 14:01

Рома Фролов

11
1

1

Consider describing the code so that one can get a clear idea about it. – Harun Diluka Heshan Mar 06 '18 at 14:11
1

This works only until FF mobile 73. At least in Firefox mobile beta (80), "-moz-touch-enabled" is not supported anymore, – Marco 'Lubber' Wienkoop Aug 24 '20 at 10:34
This doesn't work on FF 110.1.0 Android – Benbob Mar 12 '23 at 22:11

score 1 · Answer 2 · answered Jan 07 '21 at 10:17

1

This now seems to work with the relatively new pointer media query:

@-moz-document url-prefix() {
    @media (pointer:coarse) {
        /* styles */
    }
}

answered Jan 07 '21 at 10:17

phil294

10,038
8
65
98

This doesn't work on FF 110.1.0 Android – Benbob Mar 12 '23 at 22:11

score 0 · Answer 3 · answered Jul 08 '16 at 15:20

0

This worked perfectly for me.

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

answered Jul 08 '16 at 15:20

alex bennett

794
1
10
17

This targets mobile and desktop ff. – lowtechsun Jan 30 '17 at 16:50

score 0 · Answer 4 · answered Feb 04 '11 at 16:54

0

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.

answered Feb 04 '11 at 16:54

Zacqary Adam Green

21
1
2

you should use `'ontouchend' in document` in your `if` statement – vsync Jan 22 '13 at 03:36

Firefox Mobile-specific CSS

4 Answers4