gpt4 book ai didi

包含响应页面的 iOS iFrame

转载 作者:行者123 更新时间:2023-11-28 07:55:41 25 4
gpt4 key购买 nike

我正在尝试将我们的页面嵌入客户站点,它在浏览器中运行良好,我们的媒体查询也很好,但是当在 idevice 上的 ifarme 中时,嵌入的页面不会响应并显示在最大的媒体查询大小(>870px 宽)中,它看起来真的很小......

知道为什么会出现这个问题或如何解决它吗?

最佳答案

我们通过艰难的方式学到了它。

在 iFrame 中,

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

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

我们求助于通过 javascript 实现我们自己的媒体查询行为。

总结如下,

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

希望这对您有所帮助。

关于包含响应页面的 iOS iFrame,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30128386/

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