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:
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)
5 answers
solution1
6 2015-06-06 01:41:44
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
- ScreenShot for the iframe-responsive site
solution2
4 ACCPTED 2015-06-11 03:55:08
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 top:w/2; height:h/2 (pseudo code).
Also, you might need to use browser prefixes for some devices, ie 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!
solution3
3 2015-06-04 21:13:05
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;} }
solution4
0 2015-06-11 16:26:16
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.
solution5
-1 2015-06-05 11:45:11
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.