是否可以在非響應式網站中加載響應式iframe？

Question

在將此標記為重復之前，請允許我告訴您，這不是關於使iframe重新縮放，我不期望這樣的答案：制作iframe響應

我的問題很容易解釋：我有一個沒有meta視口標記的網站，寬度為（比方說）1000px。 因此，當您在移動設備中加載它時，它會重新縮放以適應360px寬度，並且一切都非常小 。

現在，我完全知道如何使iframe調整到任何寬度，但這里的問題是正在加載的網站也將顯示寬度為1000px，即使這個具有meta視口標記。 當然，這個iframe中的所有內容都顯示得非常小。

現在的問題是：我可以使該iframe的內容以全寬顯示，但不服從父文檔的寬度，而是服從設備的寬度 。 （顯然我不想要一個小的360px iframe）。

這可能有助於您理解： 在此輸入圖像描述

編輯：很多人似乎不明白這一點，所以解釋它的另一種方法是：

選擇任何沒有視口標記的網站
在上面塗上固定的框架
並嘗試使iframe看起來像是在新標簽上打開的（默認情況下，iframe的視口將像1000px一樣，我希望它是手機的視口大小）

Answer 1

如果我理解你所問的是什么， 是的，這是可能的，但由於我無法在小提琴中復制這種情況，所以這里是我測試成功的代碼：

無響應的網站（未鏈接元`viewport` ）

<!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>

響應式iframe（元`viewport`鏈接）

<!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>

注意： <head>標簽中的CSS只是制作此演示的快捷方式，我總是建議使用外部CSS文件。

更新:(我更新了代碼以匹配下面的SS）

ScreenShot為非響應網站

在此輸入圖像描述

Screenrame為iframe響應網站

IFRAME響應

Answer 2

當我第一次讀你的問題時，我說不，這是不可能的，但后來我開始思考，我相信我找到了辦法。 它需要Javascript。

首先，我們需要獲得兩個值，文檔寬度和設備屏幕寬度。 根據您的示例分別為1000px和360px。

我們可以使用document.documentElement.clientWidth獲取文檔寬度（1000px），使用window.screen.availWidth獲取屏幕寬度（360px）

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

一旦我們得到這兩個值，我們就可以得到視口的scale

var scale = dw/sw;

最后我們將iframe的寬度設置為屏幕寬度（360px），然后將其縮放到之前計算的scale 。 我們為此使用CSS轉換。

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

您仍然需要將iframe居中，以便它顯示在您想要的位置。 您可以將iframe.style.transformOrigin = '0 0'用於此或任何其他方法，例如translate(w/2, h/2)或top:w/2; height:h/2 top:w/2; height:h/2 （偽代碼）。

此外，您可能需要為某些設備使用瀏覽器前綴，即style.webkitTransform而不是style.transform 。

要計算你可以做的iframe的高度

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

這假設你想要使用50％或600px的高度。

如果您需要我詳細說明並祝您好運，請告訴我！

Answer 3

如果您能夠更改iframe的css以使用min-device-width媒體查詢和視口大小的排版，則可以執行此操作 。 這應該使設備響應，視口大小的排版將根據設備寬度的百分比調整，而不是使用“瀏覽器縮放”文本。

下面是一個CSS示例：

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

Answer 4

您實際需要的是iframe中的iframe。 主html不會直接調用目標，而是使用：

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

文件myviewport.html將是例如：

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

您擁有myviewport.html因此您可以決定對其執行的操作 - 在示例中，我顯示了預設的內容寬度，但您可以根據設備，目標頁面等操縱它，而不會影響自動縮放父文件。

Answer 5

下面的CSS / HTML示例：

 * { 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>

注意：這是為了使<iframe>響應

是否可以在非響應式網站中加載響應式iframe？

問題描述

5 個解決方案

解決方案1
6 2015-06-06 01:41:44

無響應的網站（未鏈接元`viewport` ）

響應式iframe（元`viewport`鏈接）

解決方案2
4 已采納 2015-06-11 03:55:08

解決方案3
3 2015-06-04 21:13:05

解決方案4
0 2015-06-11 16:26:16

解決方案5
-1 2015-06-05 11:45:11

是否可以在非響應式網站中加載響應式iframe？

問題描述

5 個解決方案

解決方案1 6 2015-06-06 01:41:44

無響應的網站（未鏈接元viewport ）

響應式iframe（元viewport鏈接）

解決方案2 4 已采納 2015-06-11 03:55:08

解決方案3 3 2015-06-04 21:13:05

解決方案4 0 2015-06-11 16:26:16

解決方案5 -1 2015-06-05 11:45:11

解決方案1
6 2015-06-06 01:41:44

無響應的網站（未鏈接元`viewport` ）

響應式iframe（元`viewport`鏈接）

解決方案2
4 已采納 2015-06-11 03:55:08

解決方案3
3 2015-06-04 21:13:05

解決方案4
0 2015-06-11 16:26:16

解決方案5
-1 2015-06-05 11:45:11