Media Queries: Width vs. Device Width

The whole point was that you need the meta viewport tag and then DON’T use device-width in the CSS. That much was abundantly clear and was clearly stated.

Unless I don’t understand you :wink: .

Please give me sections of the article you found were unclear and I’ll try to explain in clearer words. I’m here to help all users learn!

Instead of using an extension – I always try to keep them at minimum necessary –, you can use the DevTools too. Just click on the little phone on the DevTools toolbar, you can even visualize the media queries and change your site dimensions without changing the browser window size.

1 Like

Really? Thanks for that; I usually just resize the browser but occasionally I’d use the extension. I put that in there for people to make it easier to be completely honest. It makes it easier for people to transition into just using the desktop browser to get it fully responsive. Thanks for the information!

I think your article was pretty confusing to be honest, because I was under the impression you were referring to not using device-width in the meta viewport, which I was racking my brain for a good reason no to.

The section:

did not refer to media queries and just followed the section on the viewport meta tag. I was assuming from that flow of dialog that you were referring to the viewport meta tag and there was no example code of device-width in a media query to clarify. Your write up is pretty confusing, I’ve got to say.

I’m not sure who would actually use device-width in their media queries anyway, does anyone do this?

The title of the article refers to media queries though.

Under the premise of the article being about media queries, the rest should make sense, yes?

A very surprising amount of people, judging by all the people who come here for support. I find myself constantly repeating myself on this issue, along with a handful of other members. I am surprised how much I see it. I hoped this article would curb that some.

1 Like

what is viewport?

Perhaps this can offer some help.

1 Like

At first I also thought that you’re discouraging us from using device-width in the viewport meta tag, but then realized you’re talking about @media queries. I was confused because I didn’t know anyone was practicing it, I’ve never seen it in the wild and had never heard anyone talking about it.

It’s an interesting insight that people actually use it, where do you think they got it from?

It’s available so people use it. One of those things that should probably be removed.

Great explanation of the differences between width and device-width in media queries. Good to know the effects of each.

However, like others I was also initially confused—at first I thought you were discouraging use of device-width in the meta tag rather than in media queries. I understand that the title of the article and introductory paragraphs referred to media queries, but it never hurts to be unambiguously clear, especially given the identical naming but different recommendations between the meta tag and media queries. Even a short note in bold that says you’re referring to media queries, not the meta tag, would suffice.

Regardless, very informative article. Thank you!

1 Like

Thank you for your feedback! I guess this is a case of I already know what I’m talking about but users don’t necessarily know what I am talking about.

This was my first actual article that will be read by a wide user base. Always room for improvement :slight_smile: . I don’t consider myself a great writer so all this advise will be in my head for my next article I’m working on. Thanks!

Instead of content="width=device-width, you suggest we use … ?

The article is about media queries. Not the meta tag.

Well I know why there is (partly) such confusion about the article; appears the newsletter Sitepoint sends out incorrectly describes what the article was about in the promo about the article. Makes sense now why everyone is coming in here asking more specifically about the meta viewport tag. Heard traffic picked up huge after the newsletter showcasing this so I’m guessing this affected many users. I apologize.

Oh well :slight_smile: .

Hi Ryan,

Thanks for the write up!

Little late on the article but was wondering…

What about using the ‘device-width’ media query for background image to load different sizes depending on the general size of the device? If you use the ‘width’ media query - resizing the browser viewport will make unwanted network requests for smaller images and cause white flashes to load the smaller images.

Even with its flaws (e.g. not being accurate with issues of pixels and not being future proof…), this method seems to work… although I have not extensively tested it. Wondering if there are any better ways to load responsive background images without the previously mentioned ‘width’ media query setbacks?

Hey - thanks for your comment!

But you have to ask yourself, do any users actually do this? Resize their window? I’d hazard a guess at no.

Still confused. Read through article and comments again and again.

If we are not using device-width, where are we not using it?

Does my viewport statement tag now look like:

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

Thx

The article is about media queries. Please look at the examples; e.g. max-device-width, apposed to max-width.

Do use it in the viewport meta tag:-

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

But don’t use it in media queries, use width:-

@media screen and (max-width: 600px) {}
1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.