Real Mobile CSS Resolutions for Retina Displays and Responsive Design
So I recently saw a great post by Elad Schechter (https://coderwall.com/p/ygcyha) 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:
http://alistapart.com/article/a-pixel-identity-crisis
http://37signals.com/svn/posts/3271-easy-retina-ready-images-using-scss
http://www.brettjankord.com/2012/11/28/cross-browser-retinahigh-resolution-media-queries/
http://css-tricks.com/snippets/css/retina-display-media-query/
For window.devicePixelRatio compatibility see http://www.quirksmode.org/mobile/tableViewport.html
