1、在寫手機端時必要需要加入meta
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
// （width=device-width），
//  初始縮放比例（initial-scale=1）為1.0，即網頁初始大小佔螢幕面積的100%。
//  minimum-scale=1, maximum-scale=1 最大（最小）縮放比例
//  user-scalable 是否允許使用者縮放。

2.刪除預設的蘋果工具欄和選單欄
<meta name="apple-mobile-web-app-capable" content="yes">

3.在web app應用下狀態條（螢幕頂部條）的顏色
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

4.禁止了把數字轉化為撥號連結
<meta name="format-detection" content="telephone=no">

5.瀏覽網站時的小圖示
<link rel="shortcut icon" href=" " type="/image/x-icon"> 

6.設定快取
<meta http-equiv="Cache-Control"content="no-cache"/>
//手機頁面通常在第一次載入後會進行快取，然後每次重新整理會使用快取而不是去重新向伺服器傳送請求。如果不希望使用快取可以設定no-cache。

7.長時間按住頁面出現閃退
element {

  -webkit-touch-callout:none;

}

8.select{
    -webkit-appearance: none;  
    /*清除select預設樣式*/
    background: url("img/order_img/drop-down.png")no-repeat right;
    /*注：上一步清除樣式後，select中的三角符號也會被清除，所以需要自己新增下三角，我在此出用一個下三角背景圖片填充*/
    background-size: 0.3rem;
    background-position-x: 96%;
}

9. format-detection 啟動或禁用自動識別頁面中的電話號碼。
<meta name="format-detection"content="telephone=no">

10、上下拉動滾動條時卡頓、慢
body {-webkit-overflow-scrolling: touch; overflow-scrolling: touch;}

11、禁止複製、選中文字
Element {-webkit-user-select:none;
  -moz-user-select:none;
  -khtml-user-select:none;
   user-select:none;
}

12、iphone及ipad下輸入框預設內陰影
Element{
  -webkit-appearance:none;
}

13、ios和android下觸控元素時出現半透明灰色遮罩
Element {
  -webkit-tap-highlight-color:rgba(255,255,255,0)
}

14、圓角bug
某些Android手機圓角失效
background-clip: padding-box;

15、頂部狀態列背景色
<meta name="apple-mobile-web-app-status-bar-style"content="black"/>

16、啟動畫面
<link rel="apple-touch-startup-image"href="start.png"/>
iOS下頁面啟動載入時顯示的畫面圖片，避免載入時的白屏。

17、windows phone 點選無高光
<meta name="msapplication-tap-highlight"content="no">

18、ios 設定input 按鈕樣式會被預設樣式覆蓋
解決方式如下：
input,
textarea {
  border: 0; 
  -webkit-appearance: none; 
}

設定預設樣式為none

19、IOS鍵盤字母輸入，預設首字母大寫
解決方案，設定如下屬性
<input type="text"autocapitalize="off"/>

20、select 下拉選擇設定右對齊
設定如下：
select option {
direction: rtl;
}

21、消除 IE10 裡面的那個叉號
input:-ms-clear{display:none;}

22、處理點選延遲300s
$("#haorooms").on("touchend",function(event) {
   event.preventDefault();
 });

23、ios滑動手機卡頓
body{ -webkit-overflow-scrolling:touch; overflow-scrolling:touch;}  //上下拉動滾動條時卡頓、慢
-webkit-overflow-scrolling:touch;/*流暢滾動,ios7下會有滑一下滑不動的情況，所以需要寫上*/
html,body{ -webkit-tap-highlight-color: rgba(0,0,0,0); }  // 去掉蘋果手機點選瞬間出現的灰色背景
input{ -webkit-appearance: none; } // 去除蘋果手機預設的input樣式
selector{ cursor: pointer } // 給IOS系統裡cursor不為pointer的元素新增事件時會不同程度受影響，加上cursor: pointer可解決
img{ pointer-events: none; } // 阻止圖片在微信裡被點選放大

24、viewport模板
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">//主要I是強制讓文件的寬度與裝置寬度保持1:1，最大寬度1.0，禁止螢幕縮放。
<meta content="yes" name="apple-mobile-web-app-capable">//這個也是iphone私有標籤，允許全屏瀏覽。
<meta content="black" name="apple-mobile-web-app-status-bar-style">//iphone的私有標籤，iphone頂端狀態條的樣式。
<meta content="telephone=no" name="format-detection">//禁止數字自動識別為電話號碼，這個比較有用，因為一串數字在iphone上會顯示成藍色，樣式加成別的顏色也是不生效的。
<meta content="email=no" name="format-detection">