Question

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

我尝试了许多不同的框架/ iframe和样式组合，无论是来自stackoverflow还是来自各种博客，它们都可以在桌面上运行，但在移动设备上看起来都不同。

android上两个站点的比较：

在桌面浏览器上看起来相同，但在移动设备上，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-snippet-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

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

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

这应该允许iframe填充页面。

Answer 2

对于任何对此进行搜索的人，只需在html中包括原始的meta标签（来自iframe网站）即可。这样可以缩放页面以匹配iframe中的内容。

Answer 3

在外部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内容。

移动浏览器上的整页iframe

3 个答案: