title: Viewport in iOS / Android WebView
body: <p>In the main HTML file, the following lines for viewport are specified:</p>
  
  <p><code>&lt;meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" name="viewport"&gt;</code></p>
  
  <p><strong>Experiment:</strong></p>
  
  <p>I have tried to update the <code>width</code> from <code>device-width</code> to <code>640</code> and added the following codes to a JavaScript file on initialization.</p>
  
  <pre><code>alert("Viewport - Width: " + $(window).width() + "Height: " + $(window).height());
  alert("Device - Width: " + window.screen.width + "Height: " + window.screen.height);
  </code></pre>
  
  <p><b>Result:</b></p>
  
  <ol>
  <li><p>Samsung Galaxy S3 (Resolution: 720 x 1280):
  <br />
  (a) width=device-width &amp; width=640:
  <br />
  Viewport - Width: <strong>360</strong>, Height: <strong>615</strong>
  <br />
  Device - Width: <strong>720</strong>, Height: <strong>1280</strong></p></li>
  <li><p>iOS Simulator iPhone (Retina 3.5 - inch):
  <br />
  (a) width=device-width:
  <br />
  Viewport - Width: <strong>320</strong> Height: <strong>460</strong>
  <br />
  Device - Width: <strong>320</strong>, Height: <strong>480</strong>
  <br />
  (b) width=640:
  <br />
  Viewport - Width: <strong>640</strong> Height: <strong>960</strong>
  <br />
  Device - Width: <strong>320</strong>, Height: <strong>480</strong></p></li>
  </ol>
  
  <p><b>Question 1:</b> It seems to me that Android WebView is not based on the viewport setting. In the testing result, the viewport's width is 360 instead of 720. Where is the value "360" comes from?</p>
  
  <p><b>Question 2:</b> The resolution in iPhone retina 3.5 is 640 x 960. Is it because retina display so it returns 320 and 480 for width and height respectively?</p>