CODEWITHSUNDEEP
csshtmlmobileresponsive-designmedia-queries
Alex
Alex

Reputation: 11245

Can I use max-device-width and device-width without device-pixel-ratio?

I have a mobile site which tests on any modern device. My viewport meta tag is:

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">

The question: Can I relay on viewport value (especially on width=device-width) and write media queries with out device-pixel-ratio values.

Code example: I have a block which has different layout while screen width is smaller 400px. Can I use with such viewport media query like this(1):

@media all and (max-width: 399px) {
    /* some css code */
}

Or like this(2):

@media all and (max-device-width: 399px) {
    /* some css code */
}

Or I must combine 1 or 2 with large part of device-pixel-ratio values(3) for every media query:

only screen and (-webkit-min-device-pixel-ratio: 2)      and (max-width: 399px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (max-width: 399px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (max-width: 399px),
only screen and (        min-device-pixel-ratio: 2)      and (max-width: 399px),
only screen and (                min-resolution: 192dpi) and (max-width: 399px),
only screen and (                min-resolution: 2dppx)  and (max-width: 399px) { 
  /*some css code*/
}

And the second question: In my mind string width=device-width must prevent the difference between css pixels and device pixels. Is last statement wrong?

Upvotes: 4

Views: 1513

Answers (1)

nwalton
nwalton

Reputation: 2061

Short answers:

  • You can just use the max-width or max-device-width queries alone. You've taken care of the rest with the meta tag.
  • Your second question not quite right: it doesn't really relate to device pixels. width=device-width just tells the device to use its default virtual pixel (CSS pixel) measurement.
  • Another note: the last example with the complex media query would only target high-resolution devices, which is probably not what you want in this example.

Explanation:

I'm going to refer to CSS pixels as virtual pixels, but I think we're talking about the same thing.

Virtual pixel measurement is the number the browser says is its pixel width. It relates directly to CSS pixels, but can be different from device pixels. For example, if I have an older iPhone with standard-resolution display, its virtual pixel width is 320. (This takes up 320 CSS pixels.) The display also has 320 actual pixels in its width, or 320 device pixels, so the device-pixel-ratio (the ratio of virtual pixels to device pixels) is 1.

If I upgrade to a newer iPhone with a high-resolution display, it still registers 320 virtual pixels, but it now has a device-pixel-ratio of 2, or 640 actual pixels in its width. That's why everything looks so clear--there are more pixels in the same space.

If I view a site on either one of those devices, the width looks the same because they have the same virtual pixel measurement. To my CSS, they're both 320 pixels wide. This is pretty straightforward, until some mobile browsers allow us to pinch and zoom to resize a web page. This resizing changes the virtual pixel width.

Some mobile browsers actually do this resizing automatically. So if I were to visit a site on my phone's browser that had a fixed 1000px width, my phone's browser might try to fit the full width of the site in the viewable window, which would make my virtual pixels come out to 1000 instead of 320. I'd be viewing a very, very small version of the site. This is a problem for responsive sites, because if my phone says it's got 1000 virtual pixels, it activates my 1000px media query rather than the correct 320px query.

width=device-width and initial-scale=1 disable this automatic resizing, so you know that if the browser's native virtual width is 320, that's what you'll get on initial load.

minimum-scale=1, maximum-scale=1, user-scalable=no disable the user's ability to pinch and zoom by hand. This can be annoying to some users, but it gives you a little more control of the final viewing experience.

device-pixel-ratio is used to measure the resolution of the device. It's often used to serve high-resolution images to high-resolution devices, since normal resolution images can look blurry on a high-resolution device. Usually people test to see whether the device-pixel-ratio is at or above 1.5 or 2 to determine a high-resolution device.

Upvotes: 3

Related Questions