Aggresive responsive layouts based only on browser-window-size are just not right. e.g. http://sethgodin.typepad.com/.<p>Just because my window width is smaller than 768px doesn't mean I'm using a tablet or smart-phone. I don't always use the browser in full-screen. When I'm on my laptop, I almost always want to see the full-version of your website, not the smart-phone optimized one.<p>Once Retina screens are ubiquitous and browsers stop faking pixel sizes for Retina screens, 768px will be pretty tiny and you're going have to go back change all your stylesheets to keep updating the size constraints.<p>The only possible solution to this today is using Javascript (only Firefox allows touch screen detection in CSS). It seems like http://modernizr.com/ is the best choice.<p>Can you suggest a better solution to avoid using browser-window-size to detect touch screens/smaller-screens, preferably in CSS?
I just use a responsive design framework such as foundation.<p><a href="http://foundation.zurb.com/" rel="nofollow">http://foundation.zurb.com/</a>
Flagging this for later, as I'm curious to see the answers. Maybe it would be better to ask this on stackoverflow.com or one of the other stackexchange sites?