homepage Welcome to WebmasterWorld Guest from 54.211.190.232
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

This 31 message thread spans 2 pages: < < 31 ( 1 [2]     
@media for retina displays
Switching off @media for 2x pixel density
caffinated




msg:4603338
 5:22 pm on Aug 19, 2013 (gmt 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?

 

swa66




msg:4618612
 3:05 pm on Oct 23, 2013 (gmt 0)

The dpi and/or dppx values can be found a.o. here https://developer.mozilla.org/en-US/docs/Web/CSS/resolution

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 ( 1 [2]
Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved