防止iframe加載響應式設計

Question

我的應用程序具有加載iframe中的另一條路徑的功能。目的是改變一些佈局設置，顏色等，並查看該頁面在瀏覽器中的最終版本和原始版本（100％在桌面或筆記本電腦上）的外觀。

問題是iframe被加載到具有2/3系統寬度的東西（它是Bootstrap列）。這比我們的媒體查詢斷點小，並且iframe內容正在加載響應式設計。但是這破壞了第一段中的規則。

我需要它是原始頁面的小型化版本。

有沒有辦法達到這個結果？

我所試圖做的就是以某種方式與此類似谷歌的的PageSpeed： https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fstackoverflow.com%2F&tab=desktop

不同的是，谷歌需要的圖片，並在我的應用程序，用戶必須被允許與網頁互動，瀏覽其他鏈接，點擊按鈕等。它是一個屏幕模擬器/預覽器，但不響應。

Answer 1

由於CBroe提到，問題在於iframe中加載的頁面的CSS使用的是iframe的大小，因爲它的視口大小。您需要根據您希望顯示的實際頁面的大小來設置iframe的大小（例如，1200px寬），然後使用scale轉換來減小iframe的大小。

你的HTML可能看起來像：

<iframe width="1200" height="600" src="https://example.com"></iframe> 

然後重新調整使用CSS：

iframe { 
    transform: scale(0.3); 
    transform-origin: top left; 
} 

這裏是一個活生生的例子：https://codepen.io/JoshuaToenyes/pen/gMMLze