CSS Media Queries doesn't work

Question

I have problem with meda queries. I have folow css code:

    @media only screen
and (min-device-width : 0px)
and (max-device-width : 480px) {
    #header {
        background-color: pink;
    }
}

@media only screen
and (min-device-width : 481px)
and (max-device-width : 768px) {
    #header {
        background-color: blue;
    }
}

@media only screen
and (min-device-width : 769px)
and (max-device-width : 960px) {
    #header {
        background-color: green;
    }
}

@media only screen
and (min-device-width : 960px){
    #header {
        background-color: yellow;
    }
}

and two smart phones

first: Samsung Galaxy SI i9000 - 480 x 800 - show COLOR GREEN.... second: iPhone 5 - 640 x 1136 - show COLOR PINK

I don't understand.

Thank you Tomas

score 2 · Accepted Answer · answered Dec 04 '13 at 17:54

Device-width and device-height represent the logical pixels on not the physical pixels. Thus, the iPhone 5 still has a device-width of 320px even though the retina display has 640 physical pixels; the rest is consumed with pixel density. So it makes complete sense that the iPhone renders pink.

However, the Galaxy doesn't. It also has a Pixel Density of 1.

It sounds like you haven't set your ViewPort.

CSS Media Queries doesn't work

1 Answers1