caffinated - 4:24 pm on Aug 22, 2013 (gmt 0)
@drhowarddrfine: In a sense you are totally correct. In an ideal world, responsive sites are built small to large, ie. design for mobile then scale up for larger screens (the process you were loosely referring to). Unfortunately, I have a customer who is a bit stuck in the dark ages and pointed at a centered-box layout and said "that's what I want". So I'm having to work backwards (and perhaps not the only one out there with a similar dilemma?). I have a solution now that works. I have a full-screen layout and I have a small screen layout. The CSS is based around the large-screen. The following CSS @media selectors then switch to small-screen for phones and tablets but leaves devices with Retina-type screens out of the switch (because they are perfectly capable of displaying the large-screen layout):
only screen and (max-width: 1000px) and (-webkit-max-device-pixel-ratio: 1.9),
only screen and (max-width: 1000px) and (max-resolution: 1.9dppx),
only screen and (max-width: 1000px) and (max-resolution: 137dpi)
--- mobile adjustments ---
This makes the adjustments on all devices I am aware of where the pixel density is less than 2 (webkit) or less than 2 dots per pixel (Opera and Mozilla - W3 Standards compliant) or 2 x 96dpi (IE).
I have tested the above on iPhone 4S, iPad with Retina and most top browsers on PC (shrinking the window to various view-port sizes) and it also works in IE10.