Using media queries in html

Question

I wrote a simple HTML program for experimental purposes:
Here is the code:

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: green;
}

@media screen and (device-height: 375px) and (device-width: 667px) {
    body {
        background-color: blue;
    }
}
</style>
</head>
<body>

<p>Media queries are simple filters that can be applied to CSS styles. They make it easy to change styles based on the characteristics of the device rendering the content, including the display type, width, height, orientation and even resolution.</p>

</body>
</html>

But ut doesn't change color when it is tried in iPhone 6. What is wrong with the code? Is logical expression correct?

device-width and device-height will calculate exact width and height. So use min-height and min-width instead of device-width and device-height. — Suresh Ponnukalai
– Suresh Ponnukalai, Commented Nov 3, 2014 at 11:00

cari · Accepted Answer · 2014-11-03 11:13:39Z

1

this works for me on the iphone 6:

@media only screen and (min-device-width: 374px) and (max-device-width: 376px)

this works on the iphone 6+:

@media only screen and (min-device-width: 413px) and (max-device-width: 415px)

answered Nov 3, 2014 at 11:13

cari

2,3412 gold badges22 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

qwertymaster Over a year ago

So I should use min-device-width and max-device-width? Check first answer

qwertymaster Over a year ago

Great,this worked... But how do you know the values?

cari Over a year ago

trial and error^^ pls accept the answer if it works:-)

qwertymaster Over a year ago

Accepted the answer :)

user3589536 · Accepted Answer · 2014-11-03 11:11:54Z

1

This works in a browser and hopefully on your IPhone too:

(Max-width and min-width instead of device-height and device-width)

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: green;
}

@media screen and (max-height: 375px) and (max-width: 667px) {
    body {
        background-color: blue;
    }
}
</style>
</head>
<body>

<p>Media queries are simple filters that can be applied to CSS styles. They make it easy to change styles based on the characteristics of the device rendering the content, including the display type, width, height, orientation and even resolution.</p>

</body>
</html>

answered Nov 3, 2014 at 11:11

user3589536

2141 silver badge5 bronze badges

Comments

shamrock · Accepted Answer · 2014-11-03 11:37:40Z

1

Use max-device-width and min-device-height.

@media all and (min-device-width: XXXpx) and (max-device-width: XXXpx)

answered Nov 3, 2014 at 11:37

shamrock

471 silver badge10 bronze badges

Collectives™ on Stack Overflow

Using media queries in html

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related