Erlo

ios设备使用iframe宽度超出屏幕的解决方法

时间:2019-07-16 00:00   阅读:56次   来源:脚本之家页面报错

点赞

场景

在做公司官网h5项目时遇到iframe在苹果X手机上右侧超出屏幕的问题,感觉像是被截断一样,但是在其他手机上显示正常。

分析

问题原因:页面a利用iframe嵌入了b,同时设置iframe的宽度为100% ,但是页面b的实际宽度要大于外层设置的100%。
正常情况下,页面b的显示宽度应该为外层赋予的100%,但是在ios上,当iframe内真实宽度大于外层给予的宽度的时候,显示的宽度则为真实宽度。

解决

1、给iframe的外层div添加样式:overflow: auto;-webkit-overflow-scrolling:touch;width:100%;

2、给iframe设置属性scrolling='no'

3、给iframe设置样式:width: 1px; min-width: 100%; *width: 100%;

<div style="overflow: auto;-webkit-overflow-scrolling:touch;width:100%;">
 <iframe height="100%" scrolling="no" style="width: 1px; min-width: 100%; *width: 100%;" src="https://juejin.im/timeline">
 </iframe>
</div>

附:iframe在IOS里如何自适应宽度?

iframe自动变宽了,在IOS手机上出现滚动条

第一步:定义 iframe 中的scrolling属性为no,设置iframe中不显示滚动条。

<iframe scrolling="no" ></iframe>

第二步:设置iframe的样式为如下所示

iframe{
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  min-width: 100%;
  *width:100%;
  width:1px;
}

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对脚本之家的支持。

下一篇:iOS之2016面试题一

评论留言

还没有评论留言,赶紧来抢楼吧~~

Erlo大厅()

* 这里是“吐槽厅”,所有人可看,只保留当天信息。

  • Erlo.vip2019-09-21 19:21:10Hello、欢迎使用吐槽厅,这里是个吐槽的地方。
  • 首页 笔记分享 案例展示 ERLO 搜索
    鼠标试试
    返回顶部