title: How to preserve responsive design in mobile browser's iframe?
body: <p>I would like to load a responsive design website in an iframe as one of my website's pages. However, when it's loaded in the iframe, the site loses its responsiveness.</p>
  
  <p>Using Mashable.com as an example (which is built in responsive design)- my code looks like this:</p>
  
  <pre><code>&lt;body&gt;
      &lt;style&gt;
      body {width:100%;height:100%;margin:0;overflow:hidden;background-color:#252525;}
      #iframe {position:absolute;left:0px;top:0px;}
      &lt;/style&gt;
  
      &lt;iframe id="iframe" name="iframe1" frameborder="0" width="100%" height="100%" src="http://mashable.com"&gt;&lt;/iframe&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>If you go to mashable.com on your phone, you'll see the responsive design in action. However, if you visit the page above on your phone, mashable's responsive design isn't functioning.</p>
  
  <p>Does anyone know how to load a web page in a div and keep its responsive design?</p>
  
  <p>Thanks in advance!</p>