包含响应页面的iOS iframe



我正在尝试将我们的页面嵌入客户网站上,它在浏览器中效果很好,我们的媒体查询做得很好,但是当在IDEVICE上的Ifarme内部时,页面没有响应性的行为,并以最大的媒体查询大小(> 870px宽)显示,并且看起来很小...

知道为什么这个ahppens或如何修复它?

我们以困难的方式学习了它。

iframe内部,

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

简而言之,媒体查询与iframes并未完全兼容。

我们通过JavaScript实现自己的媒体查询。

总而言之,就像下面一样,

  • 父页面加载iframe [在我们的情况下,用户单击链接后的弹出窗口]
  • iframe设置了onmessage事件侦听器
  • 父页面启动邮政iframe
  • iframe接收父窗口宽度,直属页面的高度和任何其他必要的信息
  • 手动通过JavaScript手动重新调整布局

希望这会有所帮助。

最新更新