There is discussion about reliably detecting screen sizes in another forum (http://www.tek-tips.com/viewthread.cfm?qid=1764137). I am wondering whether/if such detection is even necessary and, if so, what is the best way to detect screen sizes, including any pros, cons, or gotchas involved. I am especially interested in comments by Deathshadow as well as anyone else who has wrestled with this issue. This is only a curiosity issue on my part, but I think the answers would be of help to many in this community.
If you are even THINKING about specific device sizes or resolutions, instead of adjusting your layout to the needs of the CONTENT, you are probably doing something horribly, terrifyingly, and disastrously WRONG!!! That's why unless a media query specifically targets an image, you shouldn't declare them in pixels any more than you should a width or font-size. EM exists for a reason, USE THEM. Base your breakpoints NOT on some arbitrary screen size or dumbass grid asshattery, base it on when YOUR content breaks at that size -- and for good measure tack on 5 to 10% extra wiggle room over that breakpoint since not all font renderers or fonts end up the same size. If you are even THINKING "screen size" you've screwed the pooch with all but one real exception, and that's targeting HDX hardware that won't lie to us like Apple's retina does -- for example the Kindle Fire HDX... and even then that's a generic match of resolution to dpi, that should just bump your font size so your existing EM layout scales to fit: @media (-webkit-min-device-pixel-ratio:2) and (min-width:1600px), (min-resolution:192dpi) and (min-width:1600px) { html { font-size:200%; } } Code (markup): Which should cascade through your document accordingly. It's like every time some nube has been duped into thinking fixed width layout methodology is a valid approach and asks "what resolution should I target?" -- it's not only the wrong question, it shows a complete lack of understanding what a website is, how they are rendered, and how they should be designed. Of course those EXACT same reasons are why 99% of what people dicking around drawing goofy pictures in photoshop do is NOT web design -- no matter how many fools woefully ignorant of HTML, CSS, or accessibility run around calling themselves "designers" despite not being qualified to design a Joe blasted thing! ... and why 99% of the rubbish at the template whorehouses like ThemeForest or TemplateMonster are little more than nube predating scam artist bullshit; a giant middle finger to usability, accessibility, sustainability, durability, deployability.... hell, it's all basically a general and complete lack of ability on the part of the people who make them! But that's all part of why I keep saying that responsive layout is simply the final step in a long line of progressive enhancement and good development practices -- alongside separation of presentation from content, dynamic fonts, elastic layout, and semi-fluid layout. Practices that steaming pile of manure "tek-tips" seems to have utterly ignored with their forums -- what with the absurdly undersized px metric fonts, px metric layouts, colour contrasts of questionable legibility, and a general ignorance of accessibility minimums much less how to use HTML or CSS properly... as further evidenced by static style in the markup, static scripting in the markup, scripttardery doing CSS' job, invalid/incomplete forms, tables for layout, gibberish use of numbered headings, cite when it's not a quote from another source, aria role bullshit sleazed on top as they were too ignorant to use HTML properly or let the content do it's job.... Hell, this: <p style="text-align:center;"><a href="/register.cfm"><b>Register</b></a> now while it's still free!</p> <p style="text-align:center;">Already a member? <a href="javascript:dismissbox()"><b>Close</b></a> this window and log in.</p> <p style="text-align:center;font-size:x-large;"><a href="/register.cfm"><b>Join Us</b></a> <a href="javascript:dismissbox();"><b>Close</b></a></p> Code (markup): Much less this: <section class="wrapper"> <h4>Member Login</h4> <div class="content"> <form name="pass" id="pass" action="/passcheck.cfm" method="post"> <input type="hidden" name="token" value="33B3466F59A4B02851A8CCDB5EE7F2393BD3C220178983E49A79CB5EA70214AF" /> <input type="hidden" name="method" value="login"/> <table><tr><td style="padding:4px 5px 5px 15px;"><label for="loginhandle">Username or Email</label><br /> <input type="text" name="handle" id="loginhandle" size="8" style="width:70px;" /><br /> <input type="password" id="loginpass" name="pass" size="8" style="width:70px;" /><br /> <label for="loginpass">Password</label></td> <td style="vertical-align:middle;padding-left:10px;"><input type="image" src="/images/btn-login.gif" alt="Log In" /></td></tr></table> <input type="checkbox" name="remember" value="1" /><a href="javascript:rememberme()">Remember Me</a><br /> <a href="/pops/forgotpassword.cfm" class="dlogify" title="Forgot Password?">Forgot Password?</a><br /><a href="/register.cfm">Join Us!</a> </form> </div></section> Code (markup): Means whoever made that site needs to do the world a favor, back the **** away from the keyboard, and take up something a bit less detail oriented like macramé. The need for me to zoom 200% to even approach legible, much less how badly it falls apart when you do so... or that I can't even get past the scripttard join dialog even if I wanted to join -- That's just why sites like that are a poster child for "designed to fail" that leave me wondering how the **** places like that even have users in the first place... So naturally the ignorance shown in the responses to that thread are hardly a surprise either. I'd almost consider it to be willfully telling users to go sod off, but I've learned over time not to blame on malice that which can be adequately explained by ignorance and ineptitude.