Last Updated: February 25, 2016
· codingjohnson

Real Mobile CSS Resolutions for Retina Displays and Responsive Design

So I recently saw a great post by Elad Schechter ( giving us all a great insight into real device screen-size and the CSS screen-size - and I was reminded of some work I've done with device-pixel-ratio.

For CSS *device-pixel-ratio*
A super-simple media query - but this isn't a CSS3 standard yet - so don't go using it everywhere - obviously, it does work for webkit browsers

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

For JavaScript *window.devicePixelRatio*
As of mid-2012 it looks like most browsers support the following property, I first learned of it as part of AppMobi and thought it wasn't a common browser feature, but it is.

var ratio = window.devicePixelRatio;
var realDocumentWidth = ratio * document.documentElement.clientWidth;

The above example just gets a figure for the real device pixel width, instead of the DIPS value. Enjoy! Hope it simplifies your life with mobile devices

Hat-tips to:

For window.devicePixelRatio compatibility see