title: PhoneGap - target-densitydpi on viewport
body: <p>I'm creating a app for Android and iOS using PhoneGap.</p>
  
  <p>After creating the "HelloWorld" app from PhoneGap's template I could see the <strong>target-densitydpi=device-dpi on the viewport by default</strong>. Okay, that's fine for now but I decided to run some tests with JQuery Mobile UI and they <strong>do not use target-densitydpi</strong> on the viewport (by the way if I do, the website should look very small on high dpi devices).</p>
  
  <p>Since I need the images of my app to look great at low and high resolution devices, I decided to run some tests on my Galaxy S4.</p>
  
  <hr>
  
  <p>First, <strong>target-densitydpi=device-dpi removed</strong>:</p>
  
  <pre><code>&lt;meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" /&gt;
  </code></pre>
  
  <p>The document.width was 360px, so I created a 360px image and it was really blurry at my GS4 screen.</p>
  
  <pre><code>&lt;img src="360img.jpg" style="width:360px;"&gt;
  </code></pre>
  
  <hr>
  
  <p>Second, <strong>target-densitydpi=device-dpi enabled</strong>:</p>
  
  <pre><code>&lt;meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /&gt;
  </code></pre>
  
  <p>The document.width was 1080px, so I created a 1080px image and it was great at my GS4 screen.</p>
  
  <pre><code>&lt;img src="1080img.jpg" style="width:1080px;"&gt;
  </code></pre>
  
  <hr>
  
  <p>Third, <strong>target-densitydpi=device-dpi removed with 1080px image</strong>:</p>
  
  <pre><code>&lt;meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" /&gt;
  </code></pre>
  
  <p>The document.width was 360px, so I used the previously created 1080px image and it looks great at the GS4 screen.</p>
  
  <pre><code>&lt;img src="1080img.jpg" style="width:100%;"&gt;
  </code></pre>
  
  <hr>
  
  <p><img src="https://i.stack.imgur.com/Y30nZ.jpg" alt="image tests"></p>
  
  <p>I was able to get the same results on second and third tests, but, wich one is the best (or correct) way to work with PhoneGap Apps?</p>
  
  <p>Thanks!</p>
  
  <hr>
  
  <p><strong>EDIT1:</strong></p>
  
  <p>I'm thinking about provide these images via API, where I can tell the size of the window to return the correct sized image.</p>
  
  <p>window.width was 1080px at all tests, so return the correct sized image will not be a problem.</p>
  
  <p>For icons, I'm considering SVG, then I don't need to create sprites for each resolution. I can resize de image via CSS or JavaScript and it should still looking good.</p>
  
  <p>What made me think to don't use target-densitydpi=device-dpi was JQuery Mobile UI, they library is responsive and they don't use it, why?</p>
  
  <hr>