iframe兼容ios、安卓

iframe适配问题

问题描述：iframe引入外部页面，安卓机型正常，ios机型上宽度无法自适应，超出了设置的宽度大小（即：设置宽度无效）

解决方案：在iframe标签外嵌套一层，并设置css属性：-webkit-overflow-scrolling: touch; 但在chrome查看样式，出现横线划掉，不用去管他，继续这样操作就好；此问题的关键在于iframe标签里面加入：scrolling=“no”就能解决屏幕适配问题，但是如果为"no"又会引起另外一个问题，iframe嵌入的网页高度无法滚动了，所以需要外面引入一层，然后设置iframe的最小高度

// 实现效果
<div id="scroll-wrapper">
      <iframe v-show="iframeState" id="show-iframe" :style="{'min-height':frameHeight+'px','width':frameWidth+'px'}" frameborder=0 name="showHere" :src="zjxw_url"></iframe>
</div>

//css部分
#scroll-wrapper {  
    -webkit-overflow-scrolling: touch;  
    overflow-y: scroll;
}
#show-iframe{
  width: 100%;
  overflow-x: hidden;
}

//js部分（主要为解决安卓下上下不能滑动的问题）
let ifram = document.getElementById('show-iframe');
if (navigator.userAgent.match(/iPad|iPhone/i)) {
      let iframe_box = document.getElementById('scroll-wrapper');
      ifram.setAttribute('scrolling', 'no');
      iframe_box.appendChild(ifram)
}