Recentemente, vi um ótimo post de Elad Schechter ( https://coderwall.com/p/ygcyha ) dando a todos nós uma ótima visão sobre o tamanho real da tela do dispositivo e o tamanho da tela CSS – e me lembrei de alguns trabalhos que eu fizemos com a razão dispositivo-pixel.
Para CSS * razão dispositivo-pixel *
Uma consulta de mídia super simples – mas este ainda não é um padrão CSS3 – então não o use em todos os lugares – obviamente, ele funciona para navegadores webkit
@media only screen and (-webkit-min-device-pixel-ratio: 2)Para JavaScript * window.devicePixelRatio *
Em meados de 2012, parecia que a maioria dos navegadores suportava a propriedade a seguir, eu a conheci como parte do AppMobi e pensei que não era um recurso comum do navegador, mas é.
var ratio = window.devicePixelRatio;
var realDocumentWidth = ratio * document.documentElement.clientWidth;O exemplo acima apenas obtém uma figura para a largura real do pixel do dispositivo, em vez do valor DIPS. Aproveitar! Espero que simplifique sua vida com dispositivos móveis
Gorjetas para:
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/
Para compatibilidade de window.devicePixelRatio, consulte http://www.quirksmode.org/mobile/tableViewport.html