问题背景

最近做一个项目里,有一个使用了slick插件做轮播效果的页面,本身打开一切正常。后面这个页面被嵌在另一个页面的iframe下时,iframe的宽度设置为100%,在iOS里打开,页面就变得不正常了,轮播部分好像被放得很大,把其他元素挤出屏幕外,轮播来回切换,页面来回闪烁。

产生原因

iOS下的safari是按照iframe里面页面元素的全尺寸来调整iframe的大小的。

轮播效果的实现原理是将所有的幻灯片都放到一个块里面,然后设置溢出隐藏,在iOS的iframe下,结合上面第一条原因,就会将iframe撑得很大。

解决方案

方案一

在包含轮播组件的元素上设置以下样式:

1
2
3
4
{
width: 1px;
min-width: 100%;
}

或者设置

1
2
3
{
width: 100vw;
}

方案二

在iframe上设置以下样式

1
2
3
4
5
iframe {
width: 1px;
min-width: 100%;
*width: 100%;
}

同时设置scrolling属性为’no’。

1
<iframe height="950" width="100%" scrolling="no" src="Content.html"></iframe>

参考资料