Is it possible to load a responsive iframe within a non-responsive site?

Question

Before you mark this as duplicated, let me tell you that this is not about making an iframe rescalable, and I'm not expecting this kind of answers: Making an iframe responsive

My problem is easy to explain: I got a site without the meta viewport tag and a width of (lets say) 1000px. Therefore, when you load it in a mobile device, it rescales to fit the 360px width, and everything is very small.

Now, I perfectly know how to make an iframe to adjust to any width but the problem here is that the site being loaded will also be displayed with a width of 1000px even if this one has the meta viewport tag. Of course, everything in this iframe is shown very small as well.

Now the question: can I make the content of that iframe to be displayed at full width and yet obey not the width of the parent document but the width of the device. (obviously I don't want a small 360px iframe).

This may help you understand: enter image description here

EDIT: Many people doesn't seem to understand this, so another way to explain it is this:

Pick any site that doesn't have the viewport tag
Paint a fixed frame on it
And try to make that iframe look like if it was opened on a new tab (by default the iframe's viewport will be like 1000px, I'd like it to be the phone's viewport sizes)

can you post a sample plunkr or something? (from the mockups it looks like you need to increase the height of the iframe as well, so that the iframe itself has the same aspect ratio as your phone screen) — mb21, Jun 02 '15 at 12:25
No no, forget about the height, height do nothing to do here. You may b confused by the so called "real content view", with that I just mean how the real web is displayed if opened on a tab instead of the iframe — Vandervals, Jun 02 '15 at 13:09
well, if you want an answer you'll need to show us the code then... as i said, plunkr/jsfiddle whatever... — mb21, Jun 02 '15 at 13:25
maybe... :P it helps to have a mcve, see http://stackoverflow.com/help/mcve — mb21, Jun 02 '15 at 14:39
the problem is that fiddles and codepens already use iframes, so that is not very reliable! — Vandervals, Jun 02 '15 at 14:44
Can you provide more details on the problems your are having with height and width? Are they set in px or relative units? — IMI, Jun 05 '15 at 12:56
Why do you want to mixed device scaled content with non-scaled content? I suggest redesigning your main page to be truly responsive and include the meta viewport tag to get the most reliable presentation of the iframe content. — IMI, Jun 08 '15 at 14:51
Because I'm doing a script to make the iframe work on any kind of page, obviously... If I'd do those websites myself I'd twist my brains this way, hahhaha Furthemore @IMI, it doesn't matter if this shouldn't be done, this is a user case and a problem that may be or may be not solved... So it is a perfectly valid question — Vandervals, Jun 08 '15 at 15:00
You should have used a "Javascript" tag on this question because there is no strictly CSS method to do what you want. You want something like this: https://css-tricks.com/cross-domain-iframe-resizing/ — IMI, Jun 08 '15 at 15:17

score 6 · Answer 1 · edited Jul 01 '15 at 17:47

6

If I understood correctly what you are asking, yes it is possible, but since I can't replicate the situation in a fiddle, here is below the code I've tested with success:

The non-responsive site (no meta `viewport` linked)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>The non-responsive site</title>
<style type="text/css">
body {
    margin:0;
    padding:0;
}
#wrapper {
    width:1000px;
    margin:0 auto;
}
iframe {
    max-width:1000px;
    width:100%;
    margin:10px auto;
    display:block;
    min-height:400px;
    border:0 
}
</style>
</head>   
<body>
    <div id="wrapper">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae orci a velit pretium commodo. Vivamus ultrices auctor lectus, non semper ipsum dictum eu. Integer nulla arcu, bibendum ac hendrerit at, scelerisque in augue. Proin a nisi et purus pulvinar blandit. Nulla ac diam congue, malesuada nunc vitae, aliquam quam. Praesent volutpat turpis eu orci volutpat iaculis. Vivamus tempus varius sagittis. Sed sollicitudin, dui ac finibus placerat, ante metus volutpat dui, eu feugiat ipsum erat nec libero. Quisque eu viverra ex, sit amet congue orci. Cras porta dignissim diam, in eleifend urna vulputate sit amet. Mauris in malesuada ligula, eget facilisis nisl. Maecenas non enim orci. Nullam porttitor fringilla velit a sodales. Suspendisse et accumsan mauris. Interdum et malesuada fames ac ante ipsum primis in faucibus. 
    </div>
    <iframe src="responsive-iframe.html"></iframe>
</body>
</html>

The responsive-iframe (meta `viewport` linked)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
body {
    margin:0;
    padding:0;
}

p {
    color:red;
    font-size:32px;
    background-color:#FEB1C7
}
@media (max-width: 480px) {
    p {
        color:green;
        font-size:48px;
        background-color:#CF0
    }
}
</style>
</head> 
<body>
    <p>I'm green below 480px width, otherwise I'm red</p>
</body>
</html>

NOTE: the CSS above in <head> tag was just a quick way to make this demo, I always recommend to use external CSS files.

UPDATE: (I updated the code to match the SS's below)

ScreenShot for the NON-RESPONSIVE site

enter image description here

ScreenShot for the iframe-responsive site

iFRAME-RESPONSIVE

edited Jul 01 '15 at 17:47

Stickers

75,527
23
147
186

answered Jun 06 '15 at 01:41

dippas

58,591
15
114
126

Your solution just shows that an iframe with the viewport tag respects media querys on rescale but this is not at all what my question was about. Please, read carefully, I'm asking for an iframe that isn't reescaled with the rescaling of the top page if the last doesn't have the meta viewport tag. In your case, although the iframe changes with the size of the page, it is as small as the rest of the things. I want it to be displayed big, like if you'd load it in a different window. – Vandervals Jun 08 '15 at 08:34
So if you want to keep the `iframe` with a fixed `width` it wont respect the media queries. Have you tried my code with your current project? Because you will get the desired image you show in your question, if you have your `media queries`done correctly – dippas Jun 08 '15 at 11:08
no no no, I'd get the first picture which is the case I started with, and I want the 3rd one – Vandervals Jun 08 '15 at 11:18
I put my code [here](http://serpa.eusou.com/so/a1s2d3.html) and this really looks like the 3rd not the 1st image – dippas Jun 08 '15 at 11:35
Using media queries has no mystery. What I'm asking is to lead any page and display it without zoom even en pages that are zoomed automaticly by the browser – Vandervals Jun 08 '15 at 13:33
Both pages haven't any zoom at all, I really can't understand what are you trying to achieve then. – dippas Jun 08 '15 at 13:40
mobile browsers try to fit websites without meta viewport tag and wide widths on the screen by zooming them out. The problem is that the size and content of the iframe is also diminished, as the iframe belongs to the top page and its sizes are defined there – Vandervals Jun 08 '15 at 14:41
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/79965/discussion-between-dippas-and-vandervals). – dippas Jun 08 '15 at 14:47
He wants to mixed device scaled content with non-device scaled content. With your demo, the desire would be to see the Green text when viewed on a mobile device. But since most devices will scale the content only the Red text will be visible. – IMI Jun 08 '15 at 14:51
@IMI But in my demo you will see green with mobile devices. Am i the only one here who's seeing that??? Do I need to take ScreenShots?? – dippas Jun 08 '15 at 14:56
@dippas I' don't see that, can you make some screenshots? – Vandervals Jun 08 '15 at 15:01
@dippas, my question is trying to find a solution for the first screenshot of yours to be green, not the second one! – Vandervals Jun 08 '15 at 15:12
@Vandervals come [here](http://chat.stackoverflow.com/rooms/79965/discussion-between-dippas-and-vandervals) – dippas Jun 08 '15 at 15:16

victmo · Accepted Answer · 2015-06-11T09:27:23.403

When I first read your question I said no, this isn't possible, but then I started thinking and I believe I found a way. It requieres Javascript.

First we need to get two values, the document width and the device screen width. As per your example 1000px and 360px respectively.

We can get the doc width (1000px) with document.documentElement.clientWidth and the screen width (360px) with window.screen.availWidth

var dw = document.documentElement.clientWidth;
var sw = window.screen.availWidth;

Once we have those two values, we can get the scale of the viewport

var scale = dw/sw;

And last we set the width of the iframe to the width of the screen (360px) to then scale it up to the previously calculated scale. We use CSS transformations for this.

var iframe = document.getElementById('theIframe');
iframe.style.width = dw + 'px';
iframe.style.transform = 'scale(' + scale + ')';

You still need to center the iframe so that it shows in the position you want. You can use iframe.style.transformOrigin = '0 0' for this or any other method like translate(w/2, h/2) or top:w/2; height:h/2 (pseudo code).

Also, you might need to use browser prefixes for some devices, i.e. style.webkitTransform instead of style.transform.

To calculate the height of your iframe you could do

var dh = document.documentElement.clientHeight;
iframe.style.height = (0.5 * dh / scale) + 'px'; // percentage based
// or...
iframe.style.height = (600 / scale) + 'px'; // pixel based

This is supposing you want use 50% or 600px for the height.

Let me know if you need me to elaborate more and good luck!

You are in the right direction, but you should add `iframe.style.transformOrigin = "0% 0%";` and you need to add +"px" to the width. Also, how would you calc the height? — Vandervals, Jun 11 '15 at 09:10
Yes, you can use transformOrigin (as I suggested) or also translate or top/left. This is up to you ;) For the height, if you want % use `dw*myPercentage*scale` or `myPixels*scale` for px. I'll update my answer to add this info. Cheers — victmo, Jun 11 '15 at 09:16
I also noticed that it is important to prevent double tap from scaling, as some strange behaviour is shown as consecuence — Vandervals, Jun 11 '15 at 09:20
Good point. I imagine some of the zooming coordinates get messed up with the transformation. Not sure you can prevent double tap. — victmo, Jun 11 '15 at 09:32
Found this thread. Maybe you'll be able to disable double tap zooming with this: http://stackoverflow.com/a/10910547/267995 — victmo, Jun 11 '15 at 19:15

score 3 · Answer 3 · answered Jun 04 '15 at 21:13

3

You can do it if you are able to change the iframe's css to use min-device-width media queries and viewport sized typography. This should make it responsive by the device and the viewport sized typography will adjust things accordinging to percentage of device width instead of using the "Browser Scaled" text.

Below is a CSS example:

@media only screen and (min-device-width:25em) {
  body {font-size:3vw; line-height:3.9vw;}
}

answered Jun 04 '15 at 21:13

IMI

2,461
1
14
20

The problem with this is that it will only affect the fontsize, but won't affect to the widths and heights as they are not always in % – Vandervals Jun 05 '15 at 07:17
1

Please update your question with some specific code examples. It is difficult to offer any more detailed advice without seeing the css of the page that is to be inside the iframe. I am assuming that you are creating the content of the iframe. If that is true, I strongly recommend using % for your container elements if you want your content to be truly adaptive. – IMI Jun 05 '15 at 12:50
It is not the inside page what matters as an iframe may load anything you want – Vandervals Jun 06 '15 at 10:50
It does matter. Small mobile devices often scale the content of a page that is not designed to be responsive. The content of the iframe will also be scaled unless it was designed to be responsive using a "device" based media query. – IMI Jun 08 '15 at 14:44
you are not getting the point here. The question is about an **iframe that can load anything** and how to configure the top page with css and js so that the iframe, no is viewed no-scaled **even when the top page is scaled** – Vandervals Jun 08 '15 at 14:52
This is the closest of my desired answer but it would be important to solve the problem of the widths... – Vandervals Jun 08 '15 at 15:15

score 0 · Answer 4 · answered Jun 11 '15 at 16:26

What you actually look for is an iframe within iframe. The main html will not call the target directly but rather use:

<iframe id="myviewport" src="myviewport.html" seamless />

The file myviewport.html will be for example:

<html>
<head>
    <meta name="viewport" content="width=1000, initial-scale=1">
</head>
<body>
    <iframe src="http://target.example.com">
</body>
</html>

You own myviewport.html so you can decide on the manipulations to perform on it - in the example I showed a pre-set content width but you can manipulate it according to the device, the target page, etc., without compromising the autoscaling of the parent document.

score -1 · Answer 5 · edited Jun 08 '15 at 09:00

-1

CSS/HTML example below:

* {
  margin: 0;
  padding: 0
}
.myIframe {
  position: relative;
  padding-bottom: 65.25%;
  padding-top: 30px;
  height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch; //<<--- THIS IS THE KEY 
  border: solid black 1px;
}
.myIframe iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div>Some text here</div>
<div class='myIframe'>
  <iframe></iframe>
</div>

NOTE: This is to make an <iframe> responsive

edited Jun 08 '15 at 09:00

Vandervals

5,774
6
48
94

answered Jun 05 '15 at 11:45

The_Monster

494
2
7
28

Not at all what I was asking for, please read the question carefully – Vandervals Jun 08 '15 at 08:34

Is it possible to load a responsive iframe within a non-responsive site?

5 Answers5

The non-responsive site (no meta `viewport` linked)

The responsive-iframe (meta `viewport` linked)

Linked

Is it possible to load a responsive iframe within a non-responsive site?

5 Answers5

The non-responsive site (no meta viewport linked)

The responsive-iframe (meta viewport linked)

Linked

The non-responsive site (no meta `viewport` linked)

The responsive-iframe (meta `viewport` linked)