title: How to setup iframe for iPad?
body: <p>I have a question about the iframe issue in iPad.
  I am using Bootstrap modal to embed an iframe inside the modal. Everything looks great on all desktop browser. However, the content in iframe is over extended in iPad portrait mode. I am not sure if it's the Bootstrap issue. Please see the <a href="http://jsfiddle.net/z5eq9s4t/3/" rel="nofollow">JSFiddle</a>.</p>
  
  <pre><code>&lt;body&gt;
      &lt;h1&gt;Test&lt;/h1&gt;
      &lt;button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#test"&gt;
          Click to open modal
      &lt;/button&gt;
  
      &lt;div class="modal fade" id="test"&gt;
          &lt;div class="modal-dialog"&gt;
              &lt;div class="modal-content"&gt;
                  &lt;div class="modal-header"&gt;
                      &lt;h4 class="modal-title"&gt;title&lt;/h4&gt;
                  &lt;/div&gt;
                  &lt;div class="modal-body"&gt;
                      &lt;iframe id="iframe1" style="height:600px; width:100%;" src="http://www.cnn.com"&gt;&lt;/iframe&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>