Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

@media for retina displays

Switching off @media for 2x pixel density

5:22 pm on Aug 19, 2013 (gmt 0)

Junior Member

5+ Year Member

joined:Sept 1, 2010
posts: 95
votes: 0

I have a simple web site layout for large-screens: a full width header, then two panels which sit side by side in the middle with a full-width footer at the bottom.

I'm using @media css to make everything full-width, falling one underneath the other on screen-sizes of 1024px wide or less.

It works really well with one exception - a friend has an iPad which is 1024px wide but it's a retina display with a 2x pixel density (thus acts like a 2048px width) - but my site is switching to small-screen mode because of the @media command being based on screen width.

I've trawled the internet to look for answers but it seems only Opera supports max pixel density. If a apply min pixel density, it affects normal screens.

Anyone else had this problem - any ideas?
3:05 pm on Oct 23, 2013 (gmt 0)

Senior Member

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Aug 7, 2003
votes: 0

The dpi and/or dppx values can be found a.o. here [developer.mozilla.org...]

Also note that the standard http://www.w3.org/TR/css3-values/#resolution states that:
Note that due to the 1:96 fixed ratio of CSS ‘in’ to CSS ‘px’, ‘1dppx’ is equivalent to ‘96dpi’. This corresponds to the default resolution of images displayed in CSS: see ‘image-resolution’.

So 192dpi or 2dppx is the same from a standards point of view.
This 31 message thread spans 2 pages: 31