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 
.
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) {}
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.