gpt4 book ai didi

html - 如何在移动浏览器的 iframe 中保留响应式设计?

转载 作者:行者123 更新时间:2023-11-28 04:12:38 24 4
gpt4 key购买 nike

我想在 iframe 中加载响应式设计网站作为我网站的页面之一。但是,当它加载到 iframe 中时,网站会失去响应能力。

以 Mashable.com 为例(采用响应式设计)- 我的代码如下所示:

<body>
<style>
body {width:100%;height:100%;margin:0;overflow:hidden;background-color:#252525;}
#iframe {position:absolute;left:0px;top:0px;}
</style>

<iframe id="iframe" name="iframe1" frameborder="0" width="100%" height="100%" src="http://mashable.com"></iframe>
</body>

如果您在手机上访问 mashable.com,您会看到响应式设计的实际效果。但是,如果您在手机上访问上述页面,则 mashable 的响应式设计无法正常工作。

有谁知道如何在 div 中加载网页并保持其响应式设计?

提前致谢!

最佳答案

元标记viewport”添加到页面的头部,以告知移动浏览器不要缩放页面。默认情况下,桌面上的 Safari 已经尊重 iframe 内容的响应式设计。

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0 maximum-scale=1.0" />

打开this JSBin link在您的手机上元标记和 following link 进行测试没有元标记。要编辑打开此 JSBin page .

注意。在 iPhone 5 (iOS6) 和 Safari 6 上测试。

关于html - 如何在移动浏览器的 iframe 中保留响应式设计?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17223469/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com