移动端App混合开发问题汇总分享

"); </div> 1、IOS系统，双击页面，页面会向上移动一节，无法滑动复原。

1. //阻止用户双击放大 
2.         var agent = navigator.userAgent.toLowerCase();        //检测是否是ios 
3.         var iLastTouch = null;                                //缓存上一次tap的时间 
4.         if (agent.indexOf('iphone') >= 0 || agent.indexOf('ipad') >= 0) 
5.         { 
6.             document.body.addEventListener('touchend', function(event) 
7.             { 
8.                 var iNow = new Date() 
9.                     .getTime(); 
10.                 iLastTouch = iLastTouch || iNow + 1 //第一次时将iLastTouch设为当前时间+1  ; 
11.                 var delta = iNow - iLastTouch; 
12.                 if (delta < 500 && delta > 0) 
13.                 { 
14.                     event.preventDefault(); 
15.                     return false; 
16.                 } 
17.                 iLastTouch = iNow; 
18.             }, false); 
19.         }; 

2、使用-webkit-overflow-scrolling: touch;触发滚动时，IOS系统，在出现双滑动会导致内部滑动不了。微信环境下，页面上滑时，会使整个页面上移。如图：

双滑动，导致内滑动区域无法滑动问题：



微信端页面上滑动：




解决方案：利用IScroll.JS创建滚动区域，或者JS自定义添加滚动。
3.MUI框架下，用tap事件代替click事件，导致a标签的href连接跳转失效。

解决方案：利用window.location代替href跳转即可。



4、移动端实现1px实线问题。

问题：在PC Web端，我们直接 border:1px solid #ddd;OK,这样没问题。

但在移动端，这样写，会出现一条很粗的模糊的一条线，很难看,也曾经写过0.5px,但在有些设备会出现显示不出来的现象。所以，最终查看了阿里，京东源码发现都是利用添加伪类来实现，这样写更好一些。

解决方法：

1. li{ 
2.             position: relative; 
3.             width: 100%; 
4.             min-height: 2.2rem; 
5.         } 
6.         li:after { 
7.             content: ''; 
8.             position: absolute; 
9.             left: 0; 
10.             bottom: 0; 
11.             right: auto; 
12.             top: auto; 
13.             height: 1px; 
14.             width: 100%; 
15.             background-color: #000; 
16.             display: