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

我就是我 2022-05-15 12:38 875阅读 0赞

前天，客户打电话来说系统出现了一个问题，就是苹果的手机页面不能往下滑动，导致数据显示只有一页，很多数据都不能显示。情况如下：  
![这里写图片描述][70]  
  但是在安卓手机上很正常，经过分析，和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样式。

<div class="main-iframe-holder">
        <iframe id="content" frameborder="0" scrolling="auto" style="width: 100%; height: 100%;" src="/mobile_annonce/Index"></iframe>
    </div>

3、查看效果，经过测试在苹果手机上都已经解决了。  
![这里写图片描述][70 1]

也是经过查看了好多资料才找到的解决方案，[解决ios系统iframe滚动问题][ios_iframe]这是一个国外的网站，幸好没有被墙掉，不然都不知道要费多少时间才能解决，就这样，也是花费了一天的时间和精力，软考和自考都落下很多了。。。希望系统不要在有bug了，让我安静的学习一段时间。  
  解决问题前，一定要分析问题产生的原因，不能上来就干，要不然会浪费很多时间，做一些无用功。才好对症下药，提高效率、节省时间。

[70]: /images/20220515/fd1b7cdc866e482d876c5dfbaf8b8dd2.png
[70 1]: /images/20220515/627bf582ec304eadadb5d0527e737da0.png
[ios_iframe]: https://davidwalsh.name/scroll-iframes-ios