title: screen.width/device-width different in PhoneGap then regular browser
body: <p>I have identical content being loaded in a browser and also through a PhoneGap application.  I'm using CSS media queries to differentiate between mobile devices and desktop.  The query works fine in the browser but in PhoneGap it fails (both running on the same phone).</p>
  
  <p>Using the remote device inspector in Chrome, I can run console statements and check issues.  The page loaded in a regular browser reports <code>screen.width</code> is <code>360</code> as the device is using a pixel ratio of 3:1.  If I inspect the same page loaded via PhoneGap then <code>screen.width</code> is reporting <code>1080</code>.  In both cases, though, <code>window.devicePixelRatio</code> reports <code>3</code>!</p>
  
  <p>I've read other people having issues because they didn't set the <code>viewport</code> but I have it currently set to: <code>&lt;meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, shrink-to-fit=no"&gt;</code></p>
  
  <p>Both devices seem to give the same answer to <code>window.innerWidth</code> which is <code>360</code>...  </p>
  
  <p>How do I get it so my CSS media queries that match <code>device-width</code> work correctly in both the browser and in PhoneGap?</p>
  
  <h2>EDIT</h2>
  
  <p>I think the difference is that PhoneGap is using the Android System WebView while the other is using Chrome for Android.  Apparently the WebView reports physical pixels while Chrome reports virtual pixels.  Is there a way around this??</p>