背景
在公司參與一個(gè)原生APP和h5混合開發(fā)的項(xiàng)目，本人在項(xiàng)目中負(fù)責(zé)h5部分，現(xiàn)將項(xiàng)目中遇到的問題總結(jié)如下：
具體問題
問題1：頁面滾動(dòng)條問題
問題描述
web頁面在PC瀏覽器上瀏覽時(shí)有滾動(dòng)條；但是，在移動(dòng)端瀏覽器打開時(shí)，沒有滾動(dòng)條
解決方法
將頁面的最外層(我一般在寫頁面時(shí)，會(huì)在body標(biāo)簽內(nèi)寫一個(gè)大容器，用于存放頁面的內(nèi)容)設(shè)置overflow:auto/scroll;并且不能設(shè)置height屬性的值(height:100%也不行)
例子
<body>
<div style="overflow:scroll/auto;">
//網(wǎng)頁內(nèi)容
</div>
</body>
問題2：touchstart 和 touchend 事件的使用
問題描述
引入touch.js文件，使用touchstart和touchend事件實(shí)現(xiàn)交互效果時(shí)，在部分手機(jī)出現(xiàn)事件觸發(fā)失效的問題[例如：低版本的榮耀手機(jī)]
解決方法
方法1："removeEventListener"和"addEventListener"一起使用
方法2：添加e.preventDefault(); 阻止部分手機(jī)默認(rèn)跳轉(zhuǎn)
法3：Jquery的on實(shí)現(xiàn)事件綁定
說明：法1與法2都是原生JS使用addEventListener實(shí)現(xiàn)事件監(jiān)聽；并且dom元素使用touchstart和touchend事件時(shí)，需要結(jié)合事件綁定或者事件監(jiān)聽一起使用，否則js部分會(huì)拋出異常
代碼
//法一：
document.getElementById('list5').addEventListener('touchstart',callback, false);
document.getElementById('list5').removeEventListener('touchstart',callback, false);
document.getElementById('list5').addEventListener('touchend',callback, false);
document.getElementById('list5').removeEventListener('touchend',callback, false);
//法二：
document.getElementById('list5').addEventListener('touchstart',function(e){
e.preventDefault();
}, false);
document.getElementById('list5').addEventListener('touchend',function(e){
e.preventDefault();
}, false);
問題3：長按閃退的問題
情景還原
有一個(gè)XXX列表頁，長按列表頁的列表項(xiàng)時(shí)(觸摸到文字)，在低版本手機(jī)中會(huì)出現(xiàn)閃退的情況
解決方法
js部分：在事件觸發(fā)時(shí)添加e.preventDefault();，用于阻止默認(rèn)行為
css部分：添加禁止文本文本復(fù)制的代碼
代碼
//js部分：
e.preventDefault();
//css部分：
-webkit-touch-callout: none; //解決閃退
//禁止復(fù)制
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
問題4: 移動(dòng)端1px的問題
問題描述
由于不同的手機(jī)有不同的像素密度,css中的1px并不等于移動(dòng)設(shè)備的1px。項(xiàng)目中使用js和rem做移動(dòng)端的屏幕適配，所以產(chǎn)生0.5px的情況，導(dǎo)致低版本的手機(jī)展示不了0.5px的邊框。
解決方法
使用css解決1px的問題，并且給需要設(shè)置成1px的dom元素直接寫上：border-width:1px;
代碼
//HTML部分：
<div class='class1'></div>
//css部分：
.class1{
border: 1px solid #ccc;
}
//css部分
/*移動(dòng)端正常展示1px的問題 start*/
%border-1px{
display: block;
position:absolute;
left: 0;
width: 100%;
content: ' ';
}
.border-1px{
position: relative;
&::after{
@extend %border-1px;
bottom: 0;
border-top: 1px solid #ccc;
}
&::before{
@extend %border-1px;
top: 0;
border-bottom: 1px solid #ccc;
}
}
@media (-webkit-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5){
.border-1px{
&::after{
-webkit-transform: scaleY(0.7);
transform: scaleY(0.7);
}
}
}
@media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2){
.border-1px{
&::after{
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
}
}
/*移動(dòng)端正常展示1px的問題 end*/
問題5：js無法正確解析到url包含"="號(hào)的參數(shù)值
問題描述
項(xiàng)目中，由于數(shù)據(jù)請求的參數(shù)值是從url地址中獲取的參數(shù)值，并且參數(shù)值包含"="號(hào)，導(dǎo)致無法正確解析到參數(shù)值(ps:js使用"="號(hào)分割url的參數(shù))
解決方法
將url進(jìn)行轉(zhuǎn)碼，再解碼【本項(xiàng)目中，APP端提供轉(zhuǎn)碼后的url地址，前端使用geturlparams插件，獲得url地址的參數(shù)值】
代碼
//解碼"="號(hào)
dom.token = decodeURI($.query.get("token"));//插件
//獲取無需解碼的值
dom.msgid = $.query.get("msgid");
問題6：原生js的事件監(jiān)聽和jquery的事件綁定在ios中失效
問題描述
使用事件監(jiān)聽或事件綁定時(shí)，由于父元素選擇body或document元素，導(dǎo)致在ios中事件觸發(fā)無效
解決方法
不使用body和document元素作為父級元素
問題7：ios中日期顯示為NaN
問題描述
Date的日期格式，在ios中有兼容性問題，ios的日期會(huì)顯示成：NaN
解決方法
解決方法：在ios中支持"2017/12/26 19:36:00"，而不支持"2017-12-26 19:36:00"格式，后面一種格式，在ios中顯示Nan （Android中都可以顯示正常）
代碼
var time = "2017-12-26 19:36:00";
time = time.replace(/\-/g, "/");//將時(shí)間格式的'-'轉(zhuǎn)成'/'形式，兼容iOS
問題8：click事件在ios中有問題
問題描述
click事件在ios點(diǎn)擊觸發(fā)時(shí)，會(huì)選中事件委托的父級元素模塊【即：由于事件冒泡，并且父級有默認(rèn)樣式】，并且有一個(gè)透明層，例如
<ul>
<li>列表項(xiàng)1</li>
<li>列表項(xiàng)2</li>
<li>列表項(xiàng)3</li>
</ul>
解析：例如ios用戶點(diǎn)擊"列表項(xiàng)1"時(shí)，父層的ul會(huì)有一個(gè)透明的樣式
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
