css media query resolution dpi versus width versus device-width -


when comes using media queries, see max-width , max-device-width used lot target "small screen" devices, or smartphones, why not use media query resolution?

for example, @media screen , (min-resolution: 230dpi) allows me write css target smartphones, such galaxy s glide sgh i927r, has 480 x 800 pixels, 4 inches (~233 ppi pixel density)

conversely, have use @media screen , (max-device-width: 480px) , (orientation: portrait) plus @media screen , (max-device-width: 800px) , (orientation: landscape).

it seems min-resolution save me time. have read several articles , blogs, not see advocating resolution.

there must obvious point missing - not professional web designer - "wrong" approach of using resolution? makes width or device-width better target "small screens."

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

maybe reason had use max-device-width of 800px, seemed "excessive" smartphones me because did not use meta tag viewport. read in article above on page 3 following:

"it means our css media queries match dimensions of "zoomed out" device's, , not actual (ie: 980px device-width on iphone instead of 320px). whenever you're optimizing webpage mobile devices, first step define particular meta tag on page alter/ disable "zoom in" behaviour of mobile browsers..."

perhaps after defining viewport, max-device-width make more sense using resolution in media queries?

chris coyier css-tricks.com , jamie bicknell of rentedsmile web design put great article on css-tricks website.

i summarize main points , post link article @ bottom.

the popular analytics software in world google analytics why of concerned resolution. unfortunately not account browser window size item account when many of using 27" screens, multiple screens, 40+ devices, , frankly, percentage of people ever use full window? know don't.

chris coyier points out ~61% of users view within 200px of full screen meaning if 'pixel-perfect' in eyes of consumer -- not. website broken. (an estimated 0.85% using full screen)

this means screen resolution totally irrelevant cause our end-users.

see full article here complete breakdown , illustration-rich analysis

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


Comments

Popular posts from this blog

get url and add instance to a model with prefilled foreign key :django admin -

css - Make div keyboard-scrollable in jQuery Mobile? -

ruby on rails - Seeing duplicate requests handled with Unicorn -