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:

/* MOBILE BROWSER KEY */

/* 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)

Advertisement

About Jeff Clayton

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. See Test Pages: https://browserstrangeness.bitbucket.io and https://browserstrangeness.github.io

‹ Internet Explorer CSS Hacks Collection

Chrome and Safari CSS Hacks Collection (Includes Opera) ›

Tagged with: Android, CSS, CSS Hacks, Hacks, iOS, iPad, iPhone, Mobile, Phone, Tablet
Posted in Android, Chrome, Computers, Cool Code, CSS, CSS Hacks, iOS, Mobile, Programming