蘋果手機頁面不兼容問題——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了，讓我安靜的學習一段時間。
  解決問題前，一定要分析問題產生的原因，不能上來就幹，要不然會浪費很多時間，做一些無用功。纔好對症下藥，提高效率、節省時間。