Responsive IFrame to display content from External Document

Question

I have an iframe to display the content of a .htm file, which is present in another location. The document loads perfectly while on a desktop browser.

But while on a mobile version, the content of the document is not displayed completely.

I am looking for a responsive iframe for both mobile and desktop views.

HTML

<iframe
    id="ifrm"
    src="URL.htm"
    width="100%"
    frameborder="0"
    scrolling="no"
    height="1450px"
    style="padding-top: 0px; float: left;" target="_blank"
/>

I referred these links, but unfortunately they didn't help:

Full-screen iframe with a height of 100%

Scale iFrame css width 100% like an image

Is the target page responsive too? – TribalChief Jun 27 '14 at 11:19 — TribalChief, Jun 27 '14 at 11:19

score 0 · Answer 1 · answered Jun 27 '14 at 11:50

0

Demo with bootstrap website in iframe

Make sure you have

<meta name="viewport" content="width=device-width, initial-scale=1" />

in <head> of your document.

answered Jun 27 '14 at 11:50

4dgaurav

11,360
4
32
59

score -1 · Answer 2 · answered Jun 27 '14 at 11:38

Try like this LINK

HTML:

<div class="iframe">
    <iframe src="http://a.rgbimg.com/cache1wZTwK/users/m/mi/micromoth/600/oIejAt8.jpg" frameborder="0"></iframe>
</div>

CSS:

.iframe {
    position:relative;
}
iframe, object, embed {
    max-width: 100%;
    min-width: 100%;
}

Responsive IFrame to display content from External Document

2 Answers2