CODEWITHSUNDEEP
css
user2163191
user2163191

Reputation: 31

css media query resolution dpi versus width versus device-width

When it comes to using media queries, I see max-width and max-device-width used a lot to target "small screen" devices, or smartphones, but why not use the media query for resolution?

For example, @media screen and (min-resolution: 230dpi) allows me to write CSS to target some smartphones, such as the Galaxy S Glide SGH I927R, which has 480 x 800 pixels, 4 inches (~233 ppi pixel density)

Conversely, I would have to use @media screen and (max-device-width: 480px) and (orientation: portrait) plus @media screen and (max-device-width: 800px) and (orientation: landscape).

It seems that min-resolution would save me some time. I have read several articles and blogs, but I do not see anyone advocating for resolution.

There must be an obvious point that I am missing - I am not a professional web designer - but what is "wrong" with the approach of using resolution? What makes width or device-width better to target "small screens."

My favorite site so far on width vs device-width has been: http://www.javascriptkit.com/dhtmltutors/cssmediaqueries.shtml

Maybe the reason that I had to use a max-device-width of 800px, which seemed "excessive" for smartphones to me is because I did not use the meta tag viewport. I read in the article above on page 3 the following:

"It means that our CSS media queries will match the dimensions of the "zoomed out" device's, and not its actual (ie: 980px for device-width on the iPhone instead of 320px). So whenever you're optimizing a webpage for mobile devices, the first step is to define a particular META tag on your page to alter/ disable the "zoom in" behaviour of mobile browsers..."

Perhaps after defining the viewport, the max-device-width would make more sense than using Resolution in the media queries?

Upvotes: 3

Views: 6880

Answers (1)

RedBarn
RedBarn

Reputation: 9

Chris Coyier with CSS-Tricks.com and Jamie Bicknell of Rentedsmile Web Design put together a great article on the CSS-Tricks website.

I will summarize their main points and post a link to the article at the bottom.

The most popular analytics software in the world is Google Analytics which is why most of us are so concerned about resolution. Unfortunately this does not account for browser window size which is the only item to account for when many of us are using 27" screens, multiple screens, 40+ devices, and frankly, what percentage of people ever use the full window? I know I don't.

Chris Coyier points out only ~61% of users view within 200px of full screen meaning if you are 'pixel-perfect' then in the eyes of your consumer -- you are not. Your website will most likely be broken. (An estimated 0.85% using full screen)

This means screen resolution is totally irrelevant to the cause which are our end-users.

See the full article here for their complete breakdown and illustration-rich analysis

http://css-tricks.com/screen-resolution-notequalto-browser-window/

Upvotes: 0

Related Questions