ios设备使用iframe宽度超出屏幕的解决方法
场景
在做公司官网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%;
iframe{ overflow:scroll; -webkit-overflow-scrolling:touch; min-width:100%; *width:100%; width:1px; }