场景 在做公司官网h5项目时遇到iframe在苹果X手机上右侧超出屏幕的问题,感觉像是被截断一样,但是在其他手机上显示正常。 分析 问题原因:页面a利用iframe嵌入了b,同
场景
在做公司官网h5项目时遇到iframe在苹果X手机上右侧超出屏幕的问题,感觉像是被截断一样,但是在其他手机上显示正常。
分析
问题原因:页面a利用iframe嵌入了b,同时设置iframe的宽度为100% ,但是页面b的实际宽度要大于外层设置的100%。 正常情况下,页面b的显示宽度应该为外层赋予的100%,但是在iOS上,当iframe内真实宽度大于外层给予的宽度的时候,显示的宽度则为真实宽度。
解决
给iframe的外层div添加样式:overflow: auto;-WEBkit-overflow-scrolling:touch;width:100%;
给iframe设置属性scrolling='no'
给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;
}
总结
--结束END--
本文标题: ios设备使用iframe宽度超出屏幕的解决方法
本文链接: https://www.lsjlt.com/news/30378.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-21
2023-10-28
2023-10-28
2023-10-27
2023-10-27
2023-10-27
2023-10-27
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0