【问题标题】:iFrame width is not responsive in iPhone XiFrame 宽度在 iPhone X 中没有响应
【发布时间】:2018-09-26 03:35:22
【问题描述】:

当我点击投资组合链接时,它将创建一个 iframe 灯箱内容。我注意到并检查了元素,显然 iframe 宽度没有遵循 css 样式,iframe 宽度从 div 溢出。下面是我的测试链接。

https://wind-dance.com/geopancar/portfolios/

我真的不知道为什么 iphone 与其他设备如此不同,因为它们运行良好。

感谢大家在这里提供帮助。

[编辑 1] 我尝试使用模拟器检查 iPhone 问题。这是screenshot。请注意,宽度和高度尺寸比设备尺寸宽。我使用的是 Android 手机,一切正常。

[解决方案]

我找到了解决方案here。显然它是 iframe 渲染的 css 问题。

【问题讨论】:

标签: iphone wordpress iframe magnific-popup


【解决方案1】:

我查看了链接,对我来说似乎很好。你能准确地说出你面临的问题吗?在哪一页?并分享它的代码,这样我们就可以看到问题出在哪里。

编辑 1:尝试像这样为 iPhone X 添加媒体查询:

@media only screen 
and (device-width : 375px) 
and (device-height : 812px) 
and (-webkit-device-pixel-ratio : 3) {

  }

您可以在此处设置分割标签和 iframe 的高度和宽度。这个我没试过,如果有效,请告诉我。

【讨论】:

  • 你能检查我的帖子编辑吗?我添加了屏幕截图以便更好地理解。
  • 你可以导航到投资组合页面,点击任何项目,它会显示一个加载 iframe 内容的灯箱。这就是问题所在。
  • 尝试为 iPhone X 添加媒体查询。检查我编辑的答案。
  • 感谢您的解决方案,但这不是我的问题的解决方案。
【解决方案2】:

你可以用这个..

@media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3) { }

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2022-11-02
    • 2022-12-05
    • 1970-01-01
    • 2014-07-12
    • 1970-01-01
    • 2017-01-28
    • 1970-01-01
    • 2017-12-29
    相关资源
    最近更新 更多