CODEWITHSUNDEEP
cssmedia-queries
Sellorio
Sellorio

Reputation: 1960

Media Query phone pixel width does not match screen resolution

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?

Upvotes: 1

Views: 3100

Answers (1)

sobolevn
sobolevn

Reputation: 18080

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.

Upvotes: 2

Related Questions