title: How to override device pixel ratio
body: <p>I made a responsive website which works fine with different screen resolutions. I use three different media queries - from 0 to 640, from 640 to 960 and above. Anyway if I try to open on my Samsung Galaxy Note2 which uses 720x1280,  since it has pixel ratio 2, it reads the website as 360x640 device, but with 640-960 styles. </p>
  
  <p>How can I be sure that the website will be displayed in original resolution?</p>
  
  <p>I included this in the header:</p>
  
  <pre><code>&lt;meta name="viewport" content="width=720, initial-scale=1, maximum-scale=1, user-scalable=no" /&gt;
  </code></pre>
  
  <p>If I add something like this in my stylesheet file</p>
  
  <pre><code>@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
  @viewport {
       max-zoom:50%;
       width:720px;
  }
  }
  </code></pre>
  
  <p>It works OK in Chrome's Emulation Mode, but not if I test it on the real mobile.</p>
  
  <p><strong>EDIT:</strong> Woo-hoo... I found a way to do that with JavaScript.</p>
  
  <pre><code>document.querySelector("meta[name=viewport]").setAttribute('content', 'width=device-width, initial-scale='+(1/window.devicePixelRatio)+', maximum-scale=1.0, user-scalable=0');
  </code></pre>
  
  <p>It reads device pixel ratio and then sets the <code>initial-scale</code> value.</p>