1

When doing media queries in CSS I noted that the value in pixels that is used for min-width and max-width when working on mobile do not seem to correlate to the device's actual width.

For example, if I was to target a landscape iPhone 5 I could use max-width:568px and it gets triggered but if I google iPhone 5 resolution I see that its long side is actually 1136px.

Why is half the device's resolution being used in media queries?

More importantly, how can I stop this from happening while still using the same queries for desktop?

Sellorio
  • 1,806
  • 1
  • 16
  • 32
  • I have noticed that other phones like the Samsung Galaxy Note 3 do this even more while some tablets report their actual resolution. – Sellorio May 19 '15 at 05:37

1 Answers1

2

First of all, take a look at this chart chart here. In the terms of that chart, this happens because iPhones (and other phones as well) render points to the several rendered pixeles (so called "device-pixel-ratio").

Sometimes it even gets a little more confusing, because some devices uses upsampling or downsampling techniques to fit the physical display size.

For example:

IPhone 5s
Points: 320 x 568
Rendered pixels: 640 x 1136
Device pixel ratio: 640 / 320 = 1136 / 568 = 2

In your queries you should use points (320 x 568) as your measurement.

This article, where you can find resolutions of different devices, can be very helpful as well.

I can not resist to mentions, that it is a good practice to make breakpoints based on a content rather than targeting specific devices. See @DaveEveritt's post.

Community
  • 1
  • 1
sobolevn
  • 16,714
  • 6
  • 62
  • 60
  • It was just an example. I am using a generic media query using DPI and pixel widths to pick mobile/tablet/desktop view based on the physical screen width. Is DPI the physical screen's dpi or the on-screen pixel density? – Sellorio May 19 '15 at 22:51
  • But does the min/max-resolution value in media queries use the CSS pixel or the physical pixel? – Sellorio May 20 '15 at 02:42
  • `@media screen and (min-width:350px) { ... }` uses **points**, which are not real. – sobolevn May 20 '15 at 03:37
  • 1
    This answer has some good links but does not actually answer the question in a usable manner. After reading this answer and all the links, I am still having trouble matching my media query (320x Or 320pt) to a device width (I have to multiply by 3 to make it work in some cases). Assigning a body width of 320pt (which I am inferring from your answer) also does not resolve the issue. – Mark Jul 24 '15 at 19:11