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)
}