H5 移動端開發中 ios/安卓坑 和經驗總結

1、 ios new時間對象，需要用逗號隔開傳日期的方式， 不支持 new Date('2019-03-01 08:00:00') 格式；

支持以下兩種方式：

2、 ios個別版本對fixed的屬性的支持性不好，需要用absolute替代；

3、 input 的 placeholder會出現文本位置偏上的時候

            input 的placeholder會出現文本位置偏上的情況：PC端設置line-height等於height能夠對齊，而移動端仍然是偏上，解決是設置line-height：normal

4、在開發微信號時候 Android和ios下點擊返回鍵  會直關閉頁面 對用戶交互效果很不好，所以要用js控制下返回鍵 返回到自己要去的頁面：

window.addEventListener("popstate", function(e) {
     location.replace(location.href);
 }, false);
 function pushHistory() {
     var state = {
         title: "title",
         url: "#"
     };
     window.history.pushState(state, "title", "#");
 }
 pushHistory();

 5、安卓瀏覽器看背景圖片，有些設備會模糊。 
用同等比例的圖片在PC機上很清楚，但是手機上很模糊，原因是什么呢？ 
經過研究，是devicePixelRatio作怪，因為手機分辨率太小，如果按照分辨率來顯示網頁，這樣字會非常小，所以蘋果當初就把iPhone 4的960640分辨率，在網頁里只顯示了480320，這樣devicePixelRatio＝2。現在android比較亂，有1.5的，有2的也有3的。讓圖片在手機里顯示更為清晰，必須使用2x的背景圖來代替img標簽（一般情況都是用2倍）。例如一個div的寬高是100100，背景圖必須得200200，然后background-size:contain;，這樣顯示出來的圖片就比較清晰了。 
代碼如下： 

background:url(../images/icon/all.png) no-repeat center center; 
-webkit-background-size:50px 50px; 
background-size: 50px 50px;display:inline-block; width:100%; height:50px; 

或者指定 background-size:contain;都可以，大家試試！

 

6、禁止復制、選中文本

Element {
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
  user-select: none;
}

7、設置緩存 
<meta http-equiv="Cache-Control" content="no-cache" /> 
手機頁面通常在第一次加載后會進行緩存，然后每次刷新會使用緩存而不是去重新向服務器發送請求。如果不希望使用緩存可以設置no-cache。 

8、長時間按住頁面出現閃退 
element { 
-webkit-touch-callout: none; 
} 

9、移動端禁止圖片長按和點擊img標簽放大圖片。

img{ pointer-events: none; }