CODEWITHSUNDEEP
htmlcssmedia-queriesscreen-resolutiondpi
Phoenix Logan
Phoenix Logan

Reputation: 1258

How do high-DPI devices like Retina displays and 1080p phones handle pixels in media queries?

For example, how many pixels does the iPhone with a Retina display appear to a media query? Is it 320 pixels or 640 pixels? If it's 640 pixels, how can a website deal with different device resolutions? Is there any way to use units that are the same regardless of a screen's resolution?

Upvotes: 1

Views: 824

Answers (1)

John Alexander
John Alexander

Reputation: 871

Retina devices like the iPhone and iPad usually use 2 device pixels = 1 CSS pixel. So a media query like this:

@media all and (max-width: 320px) {
}

actually will target an iPhone (portrait), even though it is 640 device pixels wide.

Upvotes: 2

Related Questions