在公司參與一個原生APP和h5混合開發的項目，本人在項目中負責h5部分，現將項目中遇到的問題總結如下：
具體問題問題1：頁面滾動條問題問題描述
web頁面在PC瀏覽器上瀏覽時有捲軸；但是，在行動裝置瀏覽器開啟時，沒有捲軸
解決方法
將頁面的最外層(我一般在寫頁面時，會在body標籤內寫一個大容器，用於存放頁面的內容)設定overflow:auto/scroll;並且不能設定height屬性的值(height:100%也不行)
例子
<body> <div style=overflow:scroll/auto;> //網頁內容</div></body>問題2：touchstart 與touchend 事件的使用
問題描述
引入touch.js文件，使用touchstart和touchend事件實現互動效果時，在部分手機出現事件觸發失效的問題[例如：低版本的榮耀手機]
解決方法
方法1：removeEventListener和addEventListener一起使用
方法2：新增e.preventDefault(); 阻止部分手機預設跳轉
法3：Jquery的on實現事件綁定
說明：法1與法2都是原生JS使用addEventListener實作事件監聽；且dom元素使用touchstart與touchend事件時，需要結合事件綁定或事件監聽一起使用，否則js部分會拋出異常
程式碼
//法一：document.getElementById('list5').addEventListener('touchstart',callback, false);document.getElementById('list5').removeEventListener('touchstart',callback, false);document.getElementById('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：長按閃退的問題情境還原
有一個XXX列表頁，長按列表頁的列表項目時(觸摸到文字)，在低版本手機中會出現閃退的情況
解決方法
js部分：在事件觸發時加入e.preventDefault();，用於阻止預設行為
css部分：新增禁止文字文字複製的程式碼
程式碼
//js部分：e.preventDefault();//css部分：-webkit-touch-callout: none; //解決閃退//禁止複製-moz-user-select: none;-khtml-user-select: none;user-select: none;問題4: 行動端1px的問題
問題描述
由於不同的手機有不同的像素密度,css中的1px並不等於行動裝置的1px。專案中使用js和rem做行動端的螢幕適配，所以產生0.5px的情況，導致低版的手機展示不了0.5px的邊框。
解決方法
使用css解決1px的問題，並且給需要設定成1px的dom元素直接寫上：border-width:1px;
程式碼
//HTML部分：<div class='class1'></div>//css部分：.class1{ border: 1px solid #ccc;}//css部分/*行動端正常展示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); } }}/*行動端正常展示1px的問題end*/問題5：js無法正確解析到url包含=號的參數值問題描述
專案中，由於資料請求的參數值是從url位址中取得的參數值，且參數值包含=號，導致無法正確解析到參數值(ps:js使用=號分割url的參數)
解決方法
將url進行轉碼，再解碼【本專案中，APP端提供轉碼後的url位址，前端使用geturlparams插件，取得url位址的參數值】
程式碼
//解碼=號碼dom.token = decodeURI($.query.get(token));//插件//取得無解碼的值dom.msgid = $.query.get(msgid);問題6：原生js的事件監聽和jquery的事件綁定在ios失效
問題描述
使用事件監聽或事件綁定時，由於父元素選擇body或document元素，導致在ios中事件觸發無效
解決方法
不使用body和document元素作為父級元素
問題7：ios中日期顯示為NaN問題描述
Date的日期格式，在ios有相容性問題，ios的日期會顯示成：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, /);//將時間格式的'-'轉成'/'形式，相容於iOS問題8：click事件在ios有問題
問題描述
click事件在ios點擊觸發時，會選取事件委託的父級元素模組【即：由於事件冒泡，且父級有預設樣式】，並且有一個透明層，例如
<ul> <li>列表項1</li> <li>列表項2</li> <li>列表項3</li></ul>
解析：例如ios使用者點擊列表項目1時，父層的ul會有透明的樣式
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。