H5移動端的 meta 如何設置 ，以及遇到的兼容問題

viewport設置

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

 

 

設置特定的樣式

@media only screen  and (min-device-width : 320px)  and (max-device-width : 375px){
/*一些屏幕只有320px-375px顯示的一個屬性*/
}

input問題

placehoulder會使文本位置偏移

input{
line-height: （和input框的高度一樣高）---pc端解決方法
line-height：normal ---移動端解決方法
}

設置type = number 之后pc端會出現 上下箭頭（消除箭頭）

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0;
}

　　

在ios中kepup、keydown 的監聽不是很好，只能通過input事件來解決

<input type="text" id="testInput">
<script type="text/javascript">
  document.getElementById('input').addEventListener('input', function(e){
    var value = e.target.value;
  });
</script>

flex布局

有的安卓不會識別flex-wrap:wrap;屬性但是ios就支持

.box{
    display: -webkit-box; 
    /* 老版本語法: Safari, iOS, Android browser, older WebKit browsers. */
    display: -moz-box; /* 老版本語法: Firefox (buggy) */
    display: -ms-flexbox; /* 混合版本語法: IE 10 */
    display: -webkit-flex; /* 新版本語法: Chrome 21+ */
    display: flex; /* 新版本語法: Opera 12.1, Firefox 22+ */
}

移動端點擊300ms延遲

瀏覽器興起初期，為了判斷用戶是雙擊還是單擊，就設置了一個時間段300ms，用戶單擊后300ms后做事件處理，如果在300ms內連續點擊，就判斷為雙擊，做雙擊處理事件。
所以現在用click綁定事件呢，就會有300ms延遲的問題。
300ms尚可接受，不過因為300ms產生的問題，我們必須要解決。300ms導致用戶體驗並不是很好，解決這個問題，我們一般在移動端用tap事件來取代click事件。

推薦兩個js，一個是fastclick，一個是tap.js