title: jquery mobile - viewport value on android phones
body: <p>I'm new to Jquery Mobile and I really don't understand how to set the viewport value to get the image correctly rendered. Here is my steps to test:</p>
  
  <ol>
  <li>I prepared one image which is 480x432.
  <img src="https://i.stack.imgur.com/dgn3K.jpg" alt="enter image description here"></li>
  <li>I wrote a test page like this:</li>
  </ol>
  
  <blockquote>
  <pre><code>&lt;html&gt;
  &lt;head&gt;    
  &lt;meta name="viewport" content="initial-scale=1.0, target-densitydpi=device-dpi，width=device-width, minimum-scale=0.1, user-scalable=no"/&gt;
  &lt;link href="style/jquery.mobile.theme-1.1.1.min.css" rel="stylesheet" type="text/css"/&gt;
  &lt;link href="style/jquery.mobile.structure-1.1.1.min.css" rel="stylesheet" type="text/css"/&gt;    
   &lt;script src="js/jquery.js" type="text/javascript"&gt;&lt;/script&gt;
   &lt;script src="js/jquery.mobile-1.1.1.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body style="margin:0;"&gt;
  &lt;div data-role="header" data-position="fixed" data-theme="f"&gt;
  &lt;a href="sm_app_home.html" data-theme="a" data-mini="true" data-icon="home" class="ui-btn-left"&gt;Home&lt;/a&gt;
  &lt;a href="sm_app_home.html" data-theme="a" data-mini="true" data-icon="gear" class="ui-btn-right"&gt;settings&lt;/a&gt;  
  &lt;/div&gt;  
      &lt;div data-role="content"&gt;
      &lt;div id="bld" class="bld" style="position: absolute; width: 250px; height: 125px; left: 161px; background-color: #ccccff; top: 185px;"&gt;Hello world.&lt;/div&gt;
      &lt;img id="bl1" src="img/sc_museum/480x432.jpg" /&gt;
  &lt;/div&gt;
  &lt;script&gt;
      $("#bl1").click(function(){
      var pageWidth = $(document).width();
      var pageHeight = $(document).height();
      var viewportWidth = $(window).width();
      var viewportHeight = $(window).height();
      $("#bld").html("Page width: "+pageWidth+"&lt;br /&gt;pageHeight: "+pageHeight+"&lt;br /&gt;port width: "+viewportWidth+"&lt;br /&gt;port height: "+viewportHeight);
  });
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  </blockquote>
  
  <p>3.
  The app runs on my Samsung Galaxy SII like below:
  <img src="https://i.stack.imgur.com/PT3xJ.png" alt="enter image description here"></p>
  
  <p>As you can see the image fits good but the buttons and label texts are too tiny.</p>
  
  <p>4.
  I removed <code>target-densitydpi=device-dpi</code> in the <code>viewport</code> value setting and my app looks like below:</p>
  
  <p><img src="https://i.stack.imgur.com/ZGtz9.png" alt="enter image description here"></p>
  
  <p>As you can see the buttons and label texts are good, however the image overflows.</p>
  
  <p>My questions:</p>
  
  <ol>
  <li>Why I get the page width/height and port width/height values like the values in the purple blocks when I use certain viewport value? </li>
  <li>What is the suggested viewport value and how to deal with the image width/height?</li>
  </ol>
  
  <p>I know the image width/height are pixels but the android phone screen is not using that, but still I'm not sure how to resize the images to fits the screen.</p>