Media Queries and Device Pixel Ratio

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).

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

Combining max-width and min-device-pixel-ratio

Your media query is missing and after only screen

@media only screen and  ( min-width: 568px) 

http://jsfiddle.net/L2dhY/

Checked on my mac book pro which on safari has pixel ratio > 1. Also note, you have and on your second block media query after only screen

do u have to use device pixel ratio in media query?

To answer your first question, no, you do not have to use device pixel ratio in media queries.

For the second question, the two sets of link tags are not equivalent, because the second set does not account for of pixel ratios equal to 1 or greater than 4. The first set of link tags is probably what you should be using.

Understanding responsive images and device pixel ratio

The answer is: Yes it has to do with the device pixel ratio. And yes, the device is doing it right.

The image is shown correctly because if you don't override the image dimension with CSS the sizes attribute is used (in your case "100vw", which is ~"100%") (If you change your sizes to "50vw" you will get around "50%" width).

The key part is that there are different concepts of pixels.

Normal media queries (min-width, max-width...) are measured in so called layout pixels (also CSS pixels). These pixels are an abstraction of the real physical pixels (device pixels) to have a satisfying and reliable pixel unit to do layout stuff (CSS) for retina screens (and sometimes very low resolution screens). Using the physical pixels as layout pixels would mean on small but high resolution devices very, very small layout objects. In CSS world a pixel means a layout pixel. This is calculated by device pixel / device pixel ration.

However, in case of images its all about how many pixels your device really has. If it has 1000px pixels screen width and the image is displayed at 100vw, it makes sense to load a 1000 pixel width image to satisfy the full quality of your screen. (= Each physical screen pixel gets a real image pixel assigned.)

This makes even sense if these 1000 physical pixels are measured in only 360 layout pixels.

See also: A pixel is not a pixel.

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).

---

Related Topics