title: Setting the Viewport to Scale to Fit Both Width and Height
body: <p>I'm working on a website that fits within a specific width and height (an 885x610 div with a 1px border and 3px top margin). I would like the user to never have to scroll or zoom in order to see the entire div; it should always be fully visible. Since devices have a wide variety of resolutions and aspect ratios, the idea that came to mind was to set the &quot;viewport&quot; meta tag dynamically with JavaScript. This way, the div will always be the same dimensions, different devices will have to be zoomed differently in order to fit the entire div in their viewport. I tried out my idea and got some strange results.</p>
  <p>The following code works on the first page load (tested in Chrome 32.0.1700.99 on Android 4.4.0), but as I refresh, the zoom level changes around. Also, if I comment out the <code>alert</code>, it doesn't work even on the first page load.</p>
  <h3><a href="http://jsfiddle.net/4qW8k/" rel="noreferrer">Fiddle</a></h3>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
      &lt;head&gt;
          &lt;meta charset=&quot;utf-8&quot;&gt;
          &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, height=device-height, initial-scale=1.0&quot;&gt;
          &lt;script type=&quot;text/javascript&quot;&gt;
              function getViewportWidth() {
                  if (window.innerWidth) {
                      return window.innerWidth;
                  }
                  else if (document.body &amp;&amp; document.body.offsetWidth) {
                      return document.body.offsetWidth;
                  }
                  else {
                      return 0;
                  }
              }
  
              function getViewportHeight() {
                  if (window.innerHeight) {
                      return window.innerHeight;
                  }
                  else if (document.body &amp;&amp; document.body.offsetHeight) {
                      return document.body.offsetHeight;
                  }
                  else {
                      return 0;
                  }
              }
  
              if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
                  var actual_width = getViewportWidth();
                  var actual_height = getViewportHeight();
  
                  var min_width = 887;
                  var min_height = 615;
  
                  var ratio = Math.min(actual_width / min_width, actual_height / min_height);
  
                  if (ratio &lt; 1) {
                      document.querySelector('meta[name=&quot;viewport&quot;]').setAttribute('content', 'initial-scale=' + ratio + ', maximum-scale=' + ratio + ', minimum-scale=' + ratio + ', user-scalable=yes, width=' + actual_width);
                  }
              }
  
              alert(document.querySelector('meta[name=&quot;viewport&quot;]').getAttribute('content'));
          &lt;/script&gt;
          &lt;title&gt;Test&lt;/title&gt;
          &lt;style&gt;
              body {
                  margin: 0;
              }
  
              div {
                  margin: 3px auto 0;
                  width: 885px;
                  height: 610px;
                  border: 1px solid #f00;
                  background-color: #fdd;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div&gt;
              This div is 885x610 (ratio is in between 4:3 and 16:10) with a 1px border and 3px top margin, making a total of 887x615.
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>What can I do to have this website scale to fit both the width and the height?</p>