Android media query hack variant

[andykirk]

Hi, I think I've found a variation of the following hack that doesn't affect IE:

Original: @media screen and (min-width:0\0) {} (Internet Explorer ≥ 9, Safari 4, Android ≥ 2.3)

Variant: @media screen and (min-width:0\-) {}

Replace second 0 with another character. I've used - here but I've tried it with some letters and it works the same.

I've tested this on an Android v2.3.7, browser version 4 and any properties inside the MQ are applied, but are not applied in everything else that's been tested*. Update: they're also applied to Safari 4.

*Tested on:

• Windows IE6 - 11
• Win 7 FF, Opera & Chrome latest
• OSX Safari 7 and Chrome latest
• Android 4.2.2 Chrome, Native, FF, Opera

I can test iOS7 later and will update this post.

I'm basically chalking this up as 'apply stuff only to old Android' so I thought it might be useful to others.

Cheers

[jeffclayton]

You can test in safari 4 if you use browserstack.com, you can choose to test in os x 10.6 snow leopard and it allows this cheers!

[andykirk]

Thanks! I didn't realise Browserstack went back that far. All the tests mentioned originally was done on stuff I have on my desk! I've updated the post.

[jeffclayton]

Glad to help.

[jeffclayton]

I just ran tests on IE 6,7,8,9 and 11 and so you can update that it does not affect any version of ie 6-11 now [since this is what I have on my desk at the moment and you already tested 10]

[jeffclayton]

Just tested it on Safari 4.0.0 on windows (yes i have it installed...) and it works fine there as hoped.

[andykirk]

Thanks - Updated. (I had already tested on IE8 but forgot to include)

[jeffclayton]

No worries, the more people that test these on the more locations the better the results :)

[andykirk]

Yep :-)

Ideally, I'd like a hack that only affects old Android, NOT Safari 4, but I can live with that.

[jeffclayton]

Tested on droid chrome, on kitkat 4.4.2 on galaxy s3 and no chrome either for both 0\0 and 0- (which is the way it is supposed to be, so that is verified) - the droid browser seems not to show it though. Is there a set of browsers that like it or have we found it's exact stats? (obviously we need to test on 4.3 if it likes 4.2 base browser).

[andykirk]

Ok. Mine is a Galaxy Ace 3 4.2.2 (as mentioned above and it works fine). I'm using this page to test both the original hack and the variant:

http://www.gridlight-design.co.uk/experiments/android-hack.html

[jeffclayton]

I thought that is what you meant, so you are seeing red or green then?

[andykirk]

on the Ace it's Green (with no yellow bar). On the 2.3.7 'old Android' (Xperia) it's red with a yellow bar. Both as expected.

[jeffclayton]

Cool - would love to find out where it goes from red to green in the droid history.

[jeffclayton]

My testing of chrome for 0\0 it only works on Chrome 5- (tested on the windows version of Chrome)

[jeffclayton]

Tested further: Safari 3 also works (for both 0\0 and 0-) (So they both work then in Safari 3-4)

[andykirk]

Thanks for all your help on this.

The Chrome 0\0 would be a separate issue for the original hack, I guess.

[jeffclayton]

Correct, I just posted it here since it was the 'big brother' of the other one, and it was the place we both started. :)

[jeffclayton]

btw - I posted this already last week, and it might interest you, if you make a change to the regular webkit rule to be min of 1.1 (1 is a normal desktop or laptop computer) then you have the hi-def that mobile phones and tablets use now. I would love to know if it works for you. If you didn't see it, here it is for hi-def models of Android/iPad as follows: iOS (iOS Safari 3.2+), Android (Base browser 2.1+ & Chrome 22+, Opera Mobile 10+) :

@media screen and (-webkit-min-device-pixel-ratio:1.1) { 
    .selector { property:value; } 
}

(from this thread: [https://github.com/4ae9b8/browserhacks/issues/39]) I posted a mirrored one there for firefox mobile as well. You have to scroll down a bit though...

[andykirk]

Not sure if understood you 100%, but I made another version of my test page (http://www.gridlight-design.co.uk/experiments/android-hack-2.html) but changed the 0- hack to the one you just mentioned:

2.3.7 - Red 4.2.2 (native, chrome) - Red (opera mini, firefox) - Green Win 7 - Green on all browsers

Is that what you wanted to know? Want me to test more?

[jeffclayton]

Actually if you put the 0\0 back to 0\- your test page will have this effect:

your hack will affect old droids and safari 3-4, mine will affect newer droids and iDevices

they would work well i think

[jeffclayton]

mine is for new androids not old ones :)

[andykirk]

Which android versions?

[jeffclayton]

        body {
            background: green;
        }

        /* Old Android and Safari 3-4 */
        @media screen and (min-width:0\-) {
            body {
                background: yellow;
            }
        }

        /* New (Hi-Def) Android */
        /* iOS (iOS Safari 3.2+), Android (Base browser 2.1+ & Chrome 22+, Opera Mobile 10+) */
        @media screen and (-webkit-min-device-pixel-ratio:1.1) {
            body {
                background: red;
            }
        }

Desktops/Laptops would be green Old droids would be yellow New droids would be red

[jeffclayton]

Dying to know what happens in your testing since you have both old ones and new ones.

[andykirk]

Ok, I updated the test page:

"Desktops/Laptops would be green" - YES "Old droids would be yellow" - YES (and Safari 4) "New droids would be red" - ONLY on Native, Chrome and Yandex. Green on Firefox and Opera Mini/Mobile Classic

[jeffclayton]

okay add this block to affect hi-def firefox mobile 3.5+

/* For Firefox hi-def mobile (3.5+): */
@media screen and (min--moz-device-pixel-ratio:1.1) { 
   body {  
      background: orange;  
   } 
}

firefox does not exist on ipad, so android (and probably also windows mobile hi-def but i do not have one of those to test)

[andykirk]

Firefox on new Android now blue! :-)

[andykirk]

I don't have a windows mobile to hand either.

[jeffclayton]

I really like this thread!

[jeffclayton]

Your addition to mine is cool because now we can target both.

[andykirk]

Great :-)

[jeffclayton]

Before you posted yours I was using setting webkit max pixel ratio to 1 (desktops, laptops, old mobile devices) but it was not as direct as yours.

        /* Old Tablets and Phones (Not Hi-Def), Laptops, Desktops */
        @media screen and (-webkit-max-device-pixel-ratio:1) {
            body {
                background: purple;
            }
        }

[jeffclayton]

They probably both have their uses, like if we use body, then my max:1 version, then yours, then my min 1.1 versions, then we probably cover just about everything - though not sure my old (max:1) one is needed now.

[jeffclayton]

btw - great test set, glad to work with you on this

[andykirk]

Likewise :-) Thanks for all your input.

You never know when you may want to use the max:version, so no need to get rid of it, I guess.

[jeffclayton]

True

[jeffclayton]

this is the matching firefox old one since I posted the other...

/* For Firefox (non hi-def) mobile (< 3.5) and also desktops/laptops: */
@media screen and (max--moz-device-pixel-ratio:1) { 
   body {  
      background: orange;  
   } 
}

[andykirk]

It's orange on Win 7 and OSX too...

[jeffclayton]

correct, you need to put the old ones just after the top body one because they also affect desktops and laptops (old machines and laptops/desktops have pixel ratio 1), not after our other ones i updated the specs above

[jeffclayton]

This is the order you should have them for best results (and for clarity of reading):

        body {
            background: green;
        }

        /* Old Tablets and Phones (Not Hi-Def), Laptops, Desktops */
        @media screen and (-webkit-max-device-pixel-ratio:1) {
            body {
                background: purple;
            }
        }

        /* For Firefox (Not Hi-Def) mobile ( 3.5), Laptops, Desktops */
        @media screen and (max--moz-device-pixel-ratio:1) { 
            body {  
                background: orange;  
            } 
        }

        /* Old Android and Safari 3-4 */
        @media screen and (min-width:0\-) {
            body {
                background: yellow;
            }
        }

        /* New Android */
        /* iOS (iOS Safari 3.2+), Android (Base browser 2.1+ & Chrome 22+, Opera Mobile 10+) */

        @media screen and (-webkit-min-device-pixel-ratio:1.1) {
            body {
                background: red;
            }
        }

        /* For Firefox hi-def mobile (3.5+): */
        @media screen and (min--moz-device-pixel-ratio:1.1) { 
            body {
                background: blue;
            }
        }

[jeffclayton]

I updated the above to add in both old max:1 ones of mine, i see your update and it is probably good

[andykirk]

Ok, I've created a new page:

http://www.gridlight-design.co.uk/experiments/android-hack-3.html

May be getting a little muddled. Have a look and see if it's what you expect. I'll post my results shortly.

[jeffclayton]

I will have to take a bit of time to look at it - I like what you are doing with it by the way.

[andykirk]

Firefox: Win 7, OSX - ORANGE Firefox: New android: BLUE

Chrome: Win 7, OSX - PURPLE Chrome: New android: RED

Safari 7: OSX - PURPLE Safari 5: Win 7 - PURPLE Safari 4: OS X Snow Leopard - YELLOW

Opera: Win 7, OSX - PURPLE Opera: New android - GREEN

Old Android - RED (this should be yellow. It means that New Android is also applied)

[jeffclayton]

then you need to swap these two:

        /* New Android */
        /* iOS (iOS Safari 3.2+), Android (Base browser 2.1+ & Chrome 22+, Opera Mobile 10+) */
        @media screen and (-webkit-min-device-pixel-ratio:1.1) {
            body {
                background: red;
            }
        }

        /* Old Android and Safari 3-4 */
        @media screen and (min-width:0\-) {
            body {
                background: yellow;
            }
        }

so it should be this instead:

        /* Old Android and Safari 3-4 */
        @media screen and (min-width:0\-) {
            body {
                background: yellow;
            }
        }

        /* New Android */
        /* iOS (iOS Safari 3.2+), Android (Base browser 2.1+ & Chrome 22+, Opera Mobile 10+) */

        @media screen and (-webkit-min-device-pixel-ratio:1.1) {
            body {
                background: red;
            }
        }

old goes to new for best results anyway

[andykirk]

It's already in that order...

[jeffclayton]

ah sorry i was looking at your version 2 page source (hadnt closed that tab)

what that may mean is that your old droid is hi-def (not too amazingly old)

[jeffclayton]

...assuming the order is correct (i have to really look at it later when i am not at work)

[andykirk]

Bah! Yes, you're right it is retina. Hadn't noticed! :-( As I say - muddled! :-)

[jeffclayton]

the device pixels are based on hardware, the zero-slash-(whatever) hacks are based on the browser not the device itself, so some early hi-def devices will have older browsers on them (so they would respond to both)