iOS iFrame包含响应式页面

Question

我试图将我们的页面嵌入到客户端网站上，它在浏览器中运行良好，我们的媒体查询做得很好，但是当在一个ifarme上面时，嵌入式页面并不是很好响应地行动并以最大的媒体查询大小（> 870px宽）显示它看起来很小......

知道为什么会这样做或者如何解决它？

Answer 1

我们学到了很多困难。

在iFrame中，

• 媒体查询不知道父窗口屏幕大小
• 在某些浏览器中，iFrame实际高度/宽度将超过父页面中显示的CSS宽度/高度

简而言之，媒体查询与iFrame不完全兼容。

我们通过javascript实现了我们自己的媒体查询，例如行为。

总结如下，

• 父页面加载iFrame [在我们的案例中弹出窗口，用户点击链接后]
• iFrame设置onmessage事件监听器
• 父页面将postMessage启动为iFrame
• iFrame从父页面接收父窗口宽度，高度以及任何其他必要信息
• iFrame通过javascript手动重新调整布局

希望这有帮助。