title: What are best practices for detecting pixel ratio/density?
body: <p>I am currently using JavaScript for mobile device detection on my website, this then allows me to serve different content for mobile or desktop users.</p>
  
  <p>Currently I use <code>window.devicePixelRatio</code> and <code>screen.width</code> to work out if the user if on a mobile device or not, like so:</p>
  
  <pre><code>var isMobileScreenWidth = ((screen.width / window.devicePixelRatio) &lt; 768)
  </code></pre>
  
  <p><code>768px</code> is the point at which we define mobile or desktop so 767 and below is mobile and 768 and above is desktop.</p>
  
  <p>This works perfectly, but I have recently come across an issue with Firefox, when Firefox is zoomed in and out it changes the <code>window.devicePixelRatio</code>, so:</p>
  
  <pre><code>zoom = 30%, window.devicePixelRatio = 0.3
  zoom = 100%, window.devicePixelRatio = 1.0
  zoom = 300%, window.devicePixelRatio = 3.0
  </code></pre>
  
  <p>This now causes me a problem because any users which have their browser zoomed in on Firefox get the mobile version of the site.</p>
  
  <p>I was wondering if anyone knew of a different or better way of getting the pixel density which is separate from desktop browsers.</p>
  
  <p>I do use a small amount of User Agent detection as well but because it is a massive job to keep up with the constantly changing list of mobile user agents it is not possible for me to depend on both the screen resolution and user agent at the same time.</p>
  
  <p>If anyone has any ideas about this and can help that would be awesome.</p>
  
  <p>UPDATE:</p>
  
  <p>I have just come across this:</p>
  
  <pre><code>window.screen.availWidth / document.documentElement.clientWidth
  </code></pre>
  
  <p>This quick bit of math is suggested in this post:</p>
  
  <p><a href="https://stackoverflow.com/questions/16383503/window-devicepixelratio-does-not-work-in-ie-10-mobile">window.devicePixelRatio does not work in IE 10 Mobile?</a></p>
  
  <p>I have tested it and it work in Firefox, and solves my problem, but, unfortunately now causes a problem in Chrome, so:</p>
  
  <pre><code>Chrome zoom = 100%,
  window.devicePixelRatio = 1.0,
  window.screen.availWidth / document.documentElement.clientWidth = 3.0
  </code></pre>
  
  <p>I cannot seem to find a solid solution which works for everything.</p>