移动浏览器上的整页 iframe

Question

我正在尝试将一个页面完全嵌入另一个页面的 iframe 中。它嵌入的页面应该与直接浏览源页面时完全一样。

我尝试了许多不同的框架/iframe 和样式组合，这些组合都来自 stackoverflow 或各种博客，它们都在桌面上工作，但在移动设备上看起来都不同。

两个网站在android上的对比：

• Going to the side directly
• Same site inside an iframe

在桌面浏览器上看起来一样，但在移动设备上，iframe 内的页面总是看起来更小，并且不会填满整个屏幕。

据我了解，问题来自 src 页面上的 css，但我无法对其进行编辑。 是否可以在不更改嵌入式网站本身的情况下使其在移动浏览器上运行？

更新：

我要嵌入的网站是这样的：office074.wix.com/vitalpharma

我已经尝试过的：

• www.dev-explorer.com/articles/full-page-iframe
• cloud.mobify.com/docs/working-with-iframes/
• www.smashingmagazine.com/2014/02/27/making-embedded-content-work-in-responsive-design/
• stackoverflow.com/questions/17838607/making-an-iframe-responsive
• stackoverflow.com/questions/26194040/how-does-this-responsive-iframe-container-sn-p-work/26194041#26194041
• stackoverflow.com/questions/7902960/creating-a-full-screen-iframe
• stackoverflow.com/questions/325273/make-iframe-to-fit-100-of-containers-remaining-height

（不能发布超过 2 个直接链接，抱歉）

Answer 1

在外部 HTML 中包含原始元标记（来自 iframe 站点）对我来说很有效。

var viewPortTag=document.createElement('meta');
viewPortTag.id="viewport";
viewPortTag.name = "viewport";
viewPortTag.content = "width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;";
window.parent.document.getElementsByTagName('head')[0].appendChild(viewPortTag);

在外部 HTML 的 script 标签中包含上面的代码行。这将根据移动浏览器的分辨率缩放 iframe 内容。

Answer 2

对于搜索此内容的任何人，只需在您的 html 中包含原始元标记（来自 iframe 网站）。这将缩放您的页面以匹配 iframe 中的内容。

Answer 3

在 iframe 页面的 head 标签中添加以下内容：

<style>
body {margin:0; padding:0;}
iframe {margin:0; padding:0; width:100%; height:100%;}
</style>

这应该允许 iframe 填充页面。