title: How can I make an html page automatically fit mobile device screens?
body: <p>I am putting a Formidable Form on an html page by using an <code>&lt;iframe&gt;</code>, but I'd like it to be full screen on a mobile device. So far I'm using the following code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
    &lt;style&gt;
    @import url(http://fonts.googleapis.com/css?family=Londrina+Sketch);
  
    body {
    background-color: #f3eedd;
    width: 750px;
    overflow:scroll;
      overflow-x:hidden;
    }
  
  h2 {
      font-size: 20px;
      color: #c13e18;
      margin: 10px 30px 10px 30px;
  }
  
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="header"&gt;
  &lt;h2&gt;Book Supheroes Unite&lt;/h2&gt;
  &lt;/div&gt;
  &lt;div id="form"&gt;
  &lt;iframe src="http://challenge-the-box.com/wp-admin/admin-ajax.php?action=frm_forms_preview&amp;form=sbyrt02
  " frameborder="0" scrolling="no" style="width:280px;height:535px;"&gt;&lt;/iframe&gt;&lt;/div&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I believe it has something to do with viewports? However, I'm not entirely sure on this!</p>