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

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

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

苹果手机页面不兼容问题——mui相关推荐

跳转，location.href，window.open()，load加载页面，iframe加载页面，兼容相关
跳转页面,兼容ios: window.location.href = ""; 跳转页面,ios无法跳转: window.open(); load加载页面: $("#&qu ...
H5页面rem兼容适配及华为样式调整
H5页面rem兼容适配 $(document).ready(function(){//rem兼容var winW = $(window).width();var constant = winW/6.4 ...
静态html页面如何兼容pc和移动端
静态html页面如何兼容pc和移动端在"test.html"文件中的head之间,录入如下代码: <meta name="viewport" conte ...
iphone修改html样式,怎么调整页面布局 “苹果手机”页面布局怎么调整？
在WORD中页面设置只想设置其中的一页,应该怎么做? 在PPT2016中页面布局叫做幻灯片大小设置. 电脑打开PPT2016,点击进入设计页面. 进入PPT幻灯片设计页面后,在右上角就可以看到幻灯片大 ...
苹果手机顶部安全区兼容
问题: 如图所示,标题与ios安全区域没有分开. 解决方式: 写一个div,使它高度与Ios安全区一致.将其余内容挤压到安全区下具体代码如下 <template><div clas ...
html5子页面无法弹出,弹出子页面，兼容ie
window.showModalDialog()(兼容ie的写法)模式窗口, 一种很特别的窗口,当它打开时,后面的父窗口的活动会停止,除非当前的模式子窗口关闭了, 才能操作父窗口.在做网页Ajax开发 ...
html5 字母索引,jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)
大多数Web开发人员很可能很熟悉使用锚链接跳转到的页面部分的解决方案.你可以设置一个特定的name属性的锚链接,并使用href值作为哈希符号来跳过页面.这种效果当需要列出很长的数据集时,是非常实用的, ...
视网膜New iPad与普通分辨率iPad页面的兼容处理
一.这是篇经验分享就算不是果粉也应该知道,iPad2与new iPad的重大区别之一就是显示屏的分辨率.new iPad显示屏被称之为"视网膜显示屏",其设备分辨比(之前有详细介 ...
小程序处理ipad页面不兼容/部分页面不显示
在自己写小程序的时候订单这块切换到ipad就往下拖动下面部分页面不显示在js里加一个判断如果是ipad就直接给一个限定高度 // xx.js 处理ipad不兼容onLoad: function ...
js防止页面后退(兼容ie8)
有的时候项目中会遇到禁止页面后退的操作,在网上查到了方法,但是不兼容ie8,后来同组的小伙伴找到了一个方法,很好用,所以先记载下来,方便以后在用 if(window.history&& ...

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

苹果手机页面不兼容问题——mui相关推荐

最新文章

热门文章