苹果手机页面不兼容问题——mui

苹果手机页面不兼容问题——mui

转自： https://blog.csdn.net/tink_bell/article/details/82191746

  前天，客户打电话来说系统出现了一个问题，就是苹果的手机页面不能往下滑动，导致数据显示只有一页，很多数据都不能显示。情况如下：

  但是在安卓手机上很正常，经过分析，和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了，让我安静的学习一段时间。
  解决问题前，一定要分析问题产生的原因，不能上来就干，要不然会浪费很多时间，做一些无用功。才好对症下药，提高效率、节省时间。