CODEWITHSUNDEEP
cssretina-displaypixel-ratio
Walrus
Walrus

Reputation: 20484

CSS pixel and optical sizes with new screen resolutions (such as Retina)

I am looking to make my websites appear the same size on retina and other higher resolution screens that they do on standard screens. That is to say make them optically look the same but with more detail on the higher resolution screens.

So if we had a screen with four times the number of pixels per inch then I would want the height and width of elements to be twice the normal CSS pixel measurements as well as doubling the font size.

I looked into this and it appears that the solution detects the DPI and then loads different CSS. 

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
    /* Retina-specific stuff here */
}

The thing is these screens all have different DPIs.

iPhone 4/4S and iPod Touch (4th generation) -- 326  
iPad (3rd)/4th generation)  -- 264  
MacBook Pro with Retina Display 15" -- 220
MacBook Pro with Retina Display 13" -- 227

So if we had a an element with a height of say 24px. I would like it to adjust its height to accurately fit whatever the pixel ratio is. IE. do the Maths and do it for all elements.

Upvotes: 2

Views: 1086

Answers (2)

Mathias
Mathias

Reputation: 5670

I would recommend that you read about both dpi and dppx. When you look at Retina displays you need to think about both CSS-pixels and physical pixels, as I'm sure you know.

If you want to have the componenets of the website appear in the same physical size, then I think dpi is the way to go but and add different CSS for the different dpi levels you want to cover bu if you want to differentiate between Retina and normal display you need differentiate between dpi and dppx (dots-per-physcial-inch)

These articles both helped me:

https://developer.mozilla.org/en-US/docs/Web/CSS/resolution

http://drewwells.net/blog/2013/working-with-dppx/

Upvotes: 0

br4nnigan
br4nnigan

Reputation: 739

You leave the image dimensions untouched, you just give it the appropriate source.

You can also put different queries in, see here: http://css-tricks.com/snippets/css/retina-display-media-query/

Upvotes: 0

Related Questions