我要评论场景
在做公司官网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;
}
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对移动技术网的支持。
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论