How to make iframe work properly in iOS safari

Question

I'm having trouble with displaying a Bootstrap responsive page inside an iframe in iOS safari browser. It works fine in Android Chrome. In one of the iframes, the page loses its responsiveness and doesnt even scroll (horizontally as well as vertically). In another iframe, a different page loses its footer and vertical scrolling displays the content behind the iframe.

The page which loses responsiveness

Scrolling issue

Used the following code

<iframe src="add.php" frameborder="0" overflow-x: hidden; overflow-y:hidden; style="height:100%;width:100%;"></iframe>  

separately tried the following

<iframe src="add.php" frameborder="0" style="height:100%;width:100%;"></iframe> 

iframe{
    overflow:scroll;
    -webkit-overflow-scrolling:touch;
}

As well as :

iframe {
    width: 1px;
    min-width: 100%;
    *width: 100%;
}

Using jQuery 1.11.3, Boostrap 3.3.5, respond.js, html5shiv.js, modernizr.js

Answer 1

Try to use this:

iframe {
    border:none;
    position: fixed;
    width:100%;
    height:100%;
    overflow: auto;
}

This will make your iframe fit to the screen so that, everything remains on your view. and make sure that, you have removed margin from body

Here is preview of W3Schools in iframe

Hope works fine.