CSS for Hi-Def Mobile “Retina” Devices

[ Addition: One of my contacts, Andy Kirk, set up this Testing Page to assist me. Also check Andy’s work on SitePoint ]

Here are notes I have found out there, each one has a few different schema that are equal (different looking scales, but mathematically matching), but for different devices, and explain what appear to be 4 different levels of hi-def hardware.

The question was to figure out which devices use each of these. Some of them are sort of obvious, like webkit, but since Opera, Chrome and Safari are not the same as they used to be, things do change…

Resolution media queries are currently supported in IE9+, FF3.5+, Opera9.5+ but not in webkit browsers, so Opera then for ones with resolution listed, would be Opera < 14 also.

Just for interest, WordPress uses this CSS block for hi-def mobiles as of November 2012:

@media (-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi)

Specs on your device: To test your device media query basics, one site I found useful was http://atmedia.info. This one shows similar information about your device: http://mqtest.io and to check your specific browser version and stats: http://whatismybrowser.com

What I have found for hi-def media queries — this should cover most out there:


/* Chrome 22+, iOS Safari 3.2+ (iPad/iPhone), Opera Mobile 10+, Android Browser 2.1+ */
@media (-webkit-min-device-pixel-ratio: #.##) 

/* Chrome, Firefox, Opera Mobile 9.5+, Opera Mini, Internet Explorer 9+ */
@media (min-resolution: ###dpi) 

/* Firefox 3.5+ */
@media (min--moz-device-pixel-ratio: #.##) 

/* Opera Mini, Opera Mobile 9.5-12 */
@media (-o-min-device-pixel-ratio: #.##/#)

/* Chrome, Firefox 16+, Opera Mobile 12.10+ */
@media (min-resolution: #.##dppx)

/* Chrome 21-, iOS Safari 3.1- */
@media (min-device-pixel-ratio: #.##)
/* minimal hi-def: 1.25 dpr */

@media (-webkit-min-device-pixel-ratio: 1.25)

@media (min-resolution: 120dpi)

@media (min--moz-device-pixel-ratio: 1.25)

@media (-o-min-device-pixel-ratio: 1.25/1)

@media (min-resolution: 1.25dppx)

@media (min-device-pixel-ratio: 1.25)
/* lower end hi-def: 1.3 dpr */

@media (-webkit-min-device-pixel-ratio: 1.3)

@media (min-resolution: 124.8dpi)

@media (min--moz-device-pixel-ratio: 1.3)

@media (-o-min-device-pixel-ratio: 2.6/2)

@media (min-resolution: 1.3dppx)

@media (min-device-pixel-ratio: 1.3)
/* higher-end hi-def 1.5 dpr */

@media (-webkit-min-device-pixel-ratio: 1.5)

@media (min-resolution: 144dpi)

@media (min--moz-device-pixel-ratio: 1.5)

@media (-o-min-device-pixel-ratio: 3/2)

@media (min-resolution: 1.5dppx)

@media (min-device-pixel-ratio: 1.5)
/* high-end hi-def: 2.0 - 2.1 dpr (and above) */

@media (-webkit-min-device-pixel-ratio: 2)

@media (min-resolution: 192dpi)

@media (min--moz-device-pixel-ratio: 2)

@media (-o-min-device-pixel-ratio: 2/1)

@media (min-resolution: 2dppx)

@media (min-device-pixel-ratio: 2)

IT Director/Senior Software Engineer, Photographer I test and create new CSS web page formatting hacks for BrowserHacks.com for the purpose of repairing web sites. PS-- CSS hacks are fun, but please attempt good CSS first unless in a bind.

Tagged with: , , , , , , , , ,
Posted in Android, Chrome, Computers, Cool Code, CSS, CSS Hacks, iOS, Mobile, Programming
2 comments on “CSS for Hi-Def Mobile “Retina” Devices
  1. […] This next one I tested for browserhacks was posted to us as a modification on the 0 media hack primarily for Internet Explorer. Sent to us by AndyKirk who later helped me test a variety of other Android based CSS page formatting hacks. […]


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: