ios设备使用iframe宽度超出屏幕

场景

在作公司官网h5项目时遇到iframe在苹果X手机上右侧超出屏幕的问题，感受像是被截断同样，可是在其余手机上显示正常。ios

分析

问题缘由：页面a利用iframe嵌入了b，同时设置iframe的宽度为100% ，可是页面b的实际宽度要大于外层设置的100%。 正常状况下，页面b的显示宽度应该为外层赋予的100%，可是在ios上，当iframe内真实宽度大于外层给予的宽度的时候，显示的宽度则为真实宽度。web

解决

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

二、给iframe设置属性scrolling='no'spa

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

<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>
复制代码