admin管理员组文章数量:1191345
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)
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)
- 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 Commented Jun 2, 2015 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 Commented Jun 2, 2015 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 Commented Jun 2, 2015 at 13:25
- @mb21 what about a site? – Vandervals Commented Jun 2, 2015 at 13:39
- maybe... :P it helps to have a mcve, see stackoverflow.com/help/mcve – mb21 Commented Jun 2, 2015 at 14:39
5 Answers
Reset to default 6If 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
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 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;}
}
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.
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
本文标签: javascriptIs it possible to load a responsive iframe within a nonresponsive siteStack Overflow
版权声明:本文标题:javascript - Is it possible to load a responsive iframe within a non-responsive site? - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1738446589a2087249.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论