CSS Media Query Won't Work

Question

I keep trying to do a media query in my CSS doc doing something like:

@media screen and (max-device-width: 480px) { /*css here*/}

but it won't work when I test it on an iPhone. I've tried changing the sizes and using the portrait/landscape feature, but still nothing. What am I doing wrong?

you can use max-width also, try with it @media screen and (max-width: 250px) — NaYaN, Aug 13 '13 at 10:49

score 88 · Answer 1 · edited Apr 10 '21 at 07:45

88

Check that you have

<meta name="viewport" content="width=device-width, initial-scale=1.0">

in the head of your doc

edited Apr 10 '21 at 07:45

Sabito stands with Ukraine

4,271
8
34
56

answered Aug 13 '13 at 10:52

David Taiaroa

25,157
7
62
50

9

This is important. Because without viewport tag media queries don't work at all. – user31782 Oct 14 '16 at 13:37
This should be the correct answer – Braza Jul 29 '20 at 23:57

score 13 · Accepted Answer · answered Aug 13 '13 at 10:50

13

I always call mine when I link the CSS in the head of the HTML.

An example from a current page I'm working on:

<link rel="stylesheet" type="text/css" media="screen and (min-device-width: 320px) and (max-device-width: 500px)" href="css/mobile.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-device-width: 501px)" href="css/main.css" />

This selects the CSS doc that will be loaded right from the start instead of selecting styles after the CSS document is loaded (reduces number of HTTP requests)

When doing this within the CSS document itself, you should generally replace max-device-width with max-width.

answered Aug 13 '13 at 10:50

mikedugan

2,393
3
19
24

8

You are adding extra HTTP requests by separating the CSS files -- better to just combine the two unless there is a good reason for spitting them. – robooneus Aug 13 '13 at 10:52
This worked for me, I was able to copy it in and just change the href attribute – Alex Clinton Aug 13 '13 at 11:04
4

This is actually the worst way you can handle media queries. Every device will download *all* media queries, even if they do not currently meet the media query requirements. – cimmanon Aug 13 '13 at 11:23
Interesting...so it's a bit of a misnomer if it doesn't selectively load based on the parameters in the media attribute – mikedugan Aug 13 '13 at 11:35
2

I've seen an article from the Webkit team talking about how they prioritize downloading CSS files that will apply immediately, but yeah, they're all downloaded eventually. You wouldn't want to wait for the styles to download if you rotate your handheld, would you? Same applies for printing. – cimmanon Aug 13 '13 at 11:40
I had not heard that before...thanks for the info! – mikedugan Aug 13 '13 at 11:41
Rearding downloading, see http://scottjehl.github.io/CSS-Download-Tests/ – Janis Veinbergs Apr 19 '16 at 20:14

score 6 · Answer 3 · edited Apr 10 '21 at 07:46

6

Use "max-width" instead of "max-device-width" which is fixed per device.

edited Apr 10 '21 at 07:46

Sabito stands with Ukraine

4,271
8
34
56

answered Aug 13 '13 at 10:50

Shlomi Komemi

5,445
3
28
41

This isn't really relevant for handheld devices where max-width and max-device-width are the same. It only matters for desktop where the browser doesn't have to be maximized. – cimmanon Aug 13 '13 at 10:59
1

This helped me out thanks. I was looking in a browser though. I don't see why you wouldn't use it instead anyway, I mean using a desktop size interface on a shrunken desktop screen doesn't seem efficient when you can just use the max-width for both instead. – Jackie May 10 '14 at 19:39

score 6 · Answer 4 · answered Aug 13 '13 at 10:51

this is a samples media query css

/************************************************************************************
smaller than 980
*************************************************************************************/
@media screen and (max-width: 980px) {
your css here
}

/************************************************************************************
smaller than 650
*************************************************************************************/
@media screen and (max-width: 650px) {
your css here
}
/************************************************************************************
smaller than 560
*************************************************************************************/
@media screen and (max-width: 480px) {
your css here
}

Hard to understand as you have not provided the code..but the common mistake people do it by not adding this meta data

<meta name="viewport" content="width=device-width, initial-scale=1">

score 0 · Answer 5 · answered Aug 13 '13 at 10:50

0

I'm not sure but I think the max-device-width of an iphone is 640px. Give it a try.

answered Aug 13 '13 at 10:50

Romain Braun

3,624
4
23
46

score 0 · Answer 6 · edited May 28 '14 at 14:32

0

@media only screen and (min-width : 480px) {

}

It seems to work fine in both Android and iPhone.

edited May 28 '14 at 14:32

Sid M

4,354
4
30
50

answered Aug 13 '13 at 10:50

Parfait

1,752
1
11
12

CSS Media Query Won't Work

6 Answers6

Linked