场景
在做公司官网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%;
1
2
3
4
|
< 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中不显示滚动条。
1
|
< iframe scrolling = "no" ></ iframe > |
第二步:设置iframe的样式为如下所示
1
2
3
4
5
6
7
|
iframe{ overflow : scroll ; -webkit-overflow-scrolling: touch; min-width : 100% ; * width : 100% ; width : 1px ; } |
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对服务器之家的支持。
原文链接:https://juejin.im/post/5d2bf3dbe51d454f723025a4