title: Using screen.width and window.devicePixelRatio to detect mobile and/or retina displays is this a bad approach?
body: <p>I'm developing a website for a business. It's not a web application by any stretch of the imagination but I would like it to look ok on mobile devices rather than simply scale the desktop version. After lots of research into media queries and responsive/adaptive design approaches my requirements are that the mobile layout only kicks in when the user really is on a small screen and not just resizing their desktop window, the solution is simple and can be accomplished with media queries and minimal javascript.</p>
  
  <p>The approach I've come up with is something like this:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt; 
  var isRetina = window.devicePixelRatio &gt; 1 ? true : false;
  var isMobile = (screen.width &lt; 768) ? true : false;
  
  if (isMobile &amp;&amp; isRetina) {
      SHOW MOBILE LAYOUT AND HI-RES IMAGES
  } else if (isMobile &amp;&amp; !isRetina) {
      SHOW MOBILE LAYOUT AND LO-RES IMAGES
  } else if (!isMobile &amp;&amp; isRetina) {
      &lt;&lt;SHOW HI_RES IMAGES&gt;&gt;
  } else if (!isMobile &amp;&amp; !isRetina) {
      SHOW DESKTOP LAYOUT AND LO-RES IMAGES
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>Before I commit to this approach I figured I'd check in and see if there is a problem or a terrible gotcha awaiting me. Or if there's an even simpler/better way to achieve this goal. I've searched a bunch on SO an haven't seen any mention of using this exact same solution.</p>