CSS Media Queries, Pixel Density, Desktop and Mobile Devices

CSS media queries, pixel density, desktop and mobile devices

Add this to your head:

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

width=device-width takes pixel density into account, so a device with true resolution of 640px width and 2.0 pixel density will have a browser viewport width of 320px. Initial scale ensures mobile browsers do not attempt to zoom to fit anything (for true fluid responsive sites).

How does CSS media queries based on pixels work with modern smart phones?

You are confusing screen resolution with screen width

i.e. A phone's screen width is usually around 200 to 500 CSS pixels.

This famous blog post explains why there was the need for this being introduced: a pixel is not a pixel

Medium also has an excellent explanatory article on the topic.

For high resolutions screens, the so-called device-to-pixel ratio is greater than 1. To calculate the CSS pixel width, this is the formula:

CSSPixelWidth = DevicePixelWidth / DevicePixelRatio

Media Queries: How to target desktop, tablet, and mobile?

IMO these are the best breakpoints:

@media (min-width:320px)  { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }
@media (min-width:480px) { /* smartphones, Android phones, landscape iPhone */ }
@media (min-width:600px) { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }
@media (min-width:801px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

Edit: Refined to work better with 960 grids:

@media (min-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

In practice, many designers convert pixels to ems, largely because ems afford better zooming. At standard zoom 1em === 16px, multiply pixels by 1em/16px to get ems. For example, 320px === 20em.

In response to the comment, min-width is standard in "mobile-first" design, wherein you start by designing for your smallest screens, and then add ever-increasing media queries, working your way onto larger and larger screens.

Regardless of whether you prefer min-, max-, or combinations thereof, be cognizant of the order of your rules, keeping in mind that if multiple rules match the same element, the later rules will override the earlier rules.

Media queries and device pixel ratio

This question/answer may help you: Is there any equivalent to Android's <meta name='viewport' content='target-densitydpi=device-dpi'> for Safari on the iPhone? which in turn points to this very useful article: http://davidbcalhoun.com/2010/viewport-metatag

<meta name="viewport" content="target-densitydpi=device-dpi" />

Should make you aware that this seems to be a suitable solution for Android, but maybe not work on iOS devices (don't have a Mac or an iPhone to hand to confirm).



Related Topics



Leave a reply



Submit