How to target a device with a dppx larger than 2 but smaller than 3

Question

I'm trying to apply some css rules for devices with a 2dppx pixel ratio and some others for devices with 3dppx or higher.

As I am only targeting small devices (mobiles and tablets but no retina laptops or TVs) I have a max-width media query surrounding the other two. (edited: removing this media query doesn't solve the problem).

@media only screen and (max-width: 40em) {

    @media screen and (min-device-pixel-ratio: 2dppx) and (max-device-pixel-ratio: 2.9dppx){
        $base-font-size: 150%;
    }
    @media screen and (min-device-pixel-ratio: 3dppx) {
        $base-font-size: 180%;
    }
}

But when I run the web on my iPhone 5s (with a 2dppx), I can see the base-font-size is equal to 180%, so it seems it's taking the wrong styles. Why is it so?

David Wilkinson · Answer 1 · 2016-02-04T17:11:10.063

2

I might be completely wrong here, but I don't believe you should use dppx with min-device-pixel-ratio, you should just write it as:

@media only screen and (max-width: 40em) {

    @media screen and (min-device-pixel-ratio: 2) and (max-device-pixel-ratio: 2.9){
        $base-font-size: 150%;
    }
    @media screen and (min-device-pixel-ratio: 3) {
        $base-font-size: 180%;
    }
}

Alternatively, to be more explicit, try using the resolution property:

@media only screen and (max-width: 40em) {

    @media screen and (min-resolution: 2dppx) and (max-resolution: 2.9dppx){
        $base-font-size: 150%;
    }
    @media screen and (min-resolution: 3dppx) {
        $base-font-size: 180%;
    }
}

EDIT: you may need to append a vendor prefix as below:

@media only screen and (max-width: 40em) {

    @media screen and (min-resolution: 2dppx) and (max-resolution: 2.9dppx), screen and (-webkit-min-resolution: 2dppx) and (-webkit-max-resolution: 2.9dppx){
        $base-font-size: 150%;
    }
    @media screen and (min-resolution: 3dppx), screen and (-webkit-min-resolution: 3dppx) {
        $base-font-size: 180%;
    }
}

edited Feb 04 '16 at 17:11

answered Feb 04 '16 at 16:24

David Wilkinson

5,060
1
18
32

according to [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) seems you are right! however I've modified my code but nothing changes, in fact, according to Chrome simulator, every device no matter its resolution is taking the last styles and setting $base-font-size to 180%; – ithil Feb 04 '16 at 16:39
Out of curiosity, what happens when you take the wrapping media query (max-width: 40em) out completely and just have the resolution queries on their own? The same result? @ithil – David Wilkinson Feb 04 '16 at 16:48
Yep, same result, I'm going to edit the question to reflect that – ithil Feb 04 '16 at 16:58
@ithil how about vendor prefixes? try using `-webkit-min-resolution`, etc. – David Wilkinson Feb 04 '16 at 17:07

score 2 · Answer 2 · edited May 23 '17 at 12:01

2

Ok seems the problem might not be on the media queries itself but on the fact that it is not possible to update Sass variables inside media queries, as stated in this other Stackoverflow question.

From the accepted answer, I quote "This is simply not possible. Since the trigger @media screen and (max-width: 1170px) happens on the client-side.".

So I'll try to re-write my code to avoid the changing variables inside media queries.

edited May 23 '17 at 12:01

Community

1
1

answered Feb 04 '16 at 17:09

ithil

1,758
1
19
37

Ah, I've learned something new there too! Thanks. – David Wilkinson Feb 04 '16 at 17:36
If your question is a duplicate of another question, it should be closed as a duplicate. Posting an answer pointing to another answer is highly inappropriate. – cimmanon Feb 04 '16 at 21:59

score 1 · Answer 3 · answered Feb 04 '16 at 16:37

1

Rather than using min-device-pixel-ratio, try using min-resolution.

@media only screen and (max-width: 40em) {

    @media screen and (min-resolution: 2dppx) and (max-resolution: 2.9dppx){
        $base-font-size: 150%;
    }
    @media screen and (min-resolution: 3dppx) {
        $base-font-size: 180%;
    }
}

See the resoution section here: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

answered Feb 04 '16 at 16:37

developthewebz

1,827
3
17
43

thanks Jordan, please take a look at the comments to @David-Wilkinson answer – ithil Feb 04 '16 at 17:01
@ithil just for kicks, can you try using -webkit-min-device-pixel-ratio and see if it works? – developthewebz Feb 04 '16 at 17:08

How to target a device with a dppx larger than 2 but smaller than 3

3 Answers3