前天,客户打电话来说系统出现了一个问题,就是苹果的手机页面不能往下滑动,导致数据显示只有一页,很多数据都不能显示。情况如下:
但是在安卓手机上很正常,经过分析,和js和ajax都没有关系,那么就只可能是和mui框架或者iframe标签有关系了,找到原因后就可以定位解决了。
具体的原因是因为mui的框架样式不兼容苹果手机的浏览器,css样式有两个属性可以完美的帮助我们解决这个问题。我们将它修改一下,自己写一个样式添加上去就可以。
原先的代码:
<!--主要可变区域-->
<div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper">
<iframe id="content" frameborder="0"scrolling="auto"
style="width: 100%; height: 100%;" src="/mobile_annonce/Index" >
</iframe>
</div>
做如下修改,来兼容iphone的浏览器。
1、添加css样式:
/*********************************************************************/
/*
修改人:张连康
修改内容:兼容iframe框架的苹果手机端的下滑滚动
修改时间:2018年8月29日17:01:35
*/
.main-iframe-holder {
margin-top:44px; /*适应手机端顶部区域*/
position: fixed;
right: 0;
bottom: 0;
left: 0;
top: 0;
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
}
.main-iframe-holder iframe {
height: 100%;
width: 100%;
}
/*********************************************************************/
2、将原先的mui的框架div去掉,换成如下div,并应用上面的css样式。
<!--
/*********************************************************************/
/*
修改人:张连康
修改内容:兼容iframe框架的苹果手机端的下滑滚动
修改时间:2018年8月29日17:01:35
*/
-->
<!--主要可变区域-->
<div class="main-iframe-holder">
<iframe id="content" frameborder="0" scrolling="auto"
style="width: 100%; height: 100%;" src="/mobile_annonce/Index"></iframe>
</div>
<!--/*********************************************************************/-->
3、查看效果,经过测试在苹果手机上都已经解决了。
也是经过查看了好多资料才找到的解决方案,解决ios系统iframe滚动问题这是一个国外的网站,幸好没有被墙掉,不然都不知道要费多少时间才能解决,就这样,也是花费了一天的时间和精力,软考和自考都落下很多了。。。希望系统不要在有bug了,让我安静的学习一段时间。
解决问题前,一定要分析问题产生的原因,不能上来就干,要不然会浪费很多时间,做一些无用功。才好对症下药,提高效率、节省时间。