H5頁面窗口自動調整到設備寬度，並禁止用戶縮放頁面
<meta name =“viewport”content =“width = device-width，initial-scale = 1.0，minimum-scale = 1.0，maximum-scale = 1.0，user-scalable = no”/>
（部分安卓手機的UC瀏覽器寫完以後還是可以放大縮小）
忽略將頁面中的數字識別爲電話號碼
<meta name =“format-detection”content =“telephone = no”/>（iOS上會明顯有時候會把數字當成電話號碼）
忽略的Android的平臺中對郵箱地址的識別
<meta name =“format-detection”content =“email = no”/>
視模板
<meta charset =“utf-8”>
<meta content =“width = device-width，initial-scale = 1.0，maximum-scale = 1.0，user-scalable = no”name =“viewport”>
<meta content =“yes”name =“apple-mobile-web-app-capable”>
<meta content =“black”name =“apple-mobile-web-app-status-bar-style”>
<meta content =“telephone = no”name =“format-detection”>
<meta content =“email = no”name =“format-detection”>
WebKit的表單元素的默認外觀怎麼重置
.css {-webkit-appearance：none;}（ios上的下拉框會有圓角，所以要寫border-radius：0）
在輸入框獲得焦點時文字被清空用值在輸入框輸入文字時被清空用佔位符
WebKit的表單輸入框佔位符的文字能換行麼？IOS可以，Android的不行〜，在textarea的標籤下都可以換行〜
HTML，身體{
overflow：hidden; / *手機上寫overflow-x：hidden;會有兼容性問題，如果子級如果是絕對定位有運動到屏幕外的話ios7系統會出現留白* /
-webkit溢出滾動：觸摸; / *流暢滾動，ios7下會有滑一下滑不動的情況，所以需要寫上* /
位置：realtive; / *直接子級如果是絕對定位有運動到屏幕外的話，會出現留白* /
}
手機上的柔性佈局時會有兼容性問題，只用新版本的會出現安卓手機不識別的現象
。框{
顯示：-webkit-box; / *老版本語法：Safari，iOS， Android 瀏覽器，舊版WebKit瀏覽器。* /
顯示：-moz-box; / *老版本語法：Firefox（buggy）* /
顯示：-ms-flexbox; / *混合版本語法：IE 10 * /
顯示：-webkit-flex; / *新版本語法：Chrome 21+ * /
顯示：flex; / *新版本語法：Opera 12.1，Firefox 22+ * /
}
.box的>利{
-webkit-box-flex：1.0;
box-flex：1.0;
-webkit-flex：1.0;
flex：1;
width：0; / *解決兼容性問題* /
}
輸入框的兼容性解決
輸入[類型= “文本”]，
輸入[類型= “日期”]，
輸入[類型= “電話”]，
輸入[類型= “電子郵件”]，
輸入[類型= “密碼”] {
-webkit-appearance：none;
顯示：塊;
寬度：100％;
身高：0.8公分;
行高：正常; / *手機上的行高不能寫成和高度的值一樣，會出現再次輸入光標靠上的現象* /
背景：無;
font-size：0.32rem;
填充左：0.28rem;
border-radius：0;
-webkit-border-radius：0;
border：1px solid＃d5d5d5;
-moz-box-sizing：border-box;
-webkit-box-sizing：border-box;
盒子尺寸：邊框;
概要：無;
-webkit-transform：translateZ（0）;
-moz-transform：translateZ（0）;
-ms-transform：translateZ（0）;
-o-transform：translateZ（0）;
transform：translateZ（0）; / *解決加入js後輸入框輸入瞬間變白的現象* /
}
禁用radio和複選框默認樣式
輸入[類型= “無線電”] :: - MS-檢查，輸入[類型= “複選框”] :: - MS-檢查{
display：none; / *這樣就可以用class自定義樣式* /
}
WebKit的表單輸入框佔位符的顏色值
輸入:: - WebKit的輸入佔位符{顏色：＃999;}
輸入：焦點:: - WebKit的輸入佔位符{顏色：＃999;}
手機上的多行省略
.overflow隱藏{
顯示：box！important;
顯示：-webkit-box！重要;
溢出：隱藏;
文本溢出：省略號;
-webkit-box-orient：vertical;
-webkit-line-clamp：4; / *第幾行出現省略號* /
/ *文字對齊：證明;不能和溢出隱藏的代碼一起寫，會有錯誤* /
}
文本標籤行高：1或者是線高度等於高度文字會被切掉
手機上浮動元素能寫寬儘量寫寬不然很容易出現兼容性問題，儘量不要寫高，因爲內容多少不固定
給不同屏幕大小的手機設置特殊樣式
@media唯一屏幕和（最小設備寬度：320px）和（最大設備寬度：375px）{}
<按鈕> </按鈕>元素一定要寫上鍵入屬性不然會默認提交表單，出現想不到的缺陷
某些安卓手機的自帶瀏覽器不識別onkeydown onkeypress onkeyup事件，這些事件會導致不能輸入漢字
input框若是不想輸入文字只能讀不能輸寫可以加readonly屬性
手機上用背景圖寫運動，如果需要背景圖定位來實現運動效果可以用rem進行計算後加上basckground-size：圖的個數* 100％0;
寫背景圖時最好加上左上角或者0 0不寫寫運動效果時容易出現跳
彈層的關閉事件容易觸發彈層關閉後下一層的事件所以要給彈層關閉事件加上event.preventDefault（）
彈層彈出後不允許屏幕滾動給彈層加鼠標移動事件event.preventDefault（）
麪包屑導航如果按照引導給李加：後僞元素的話在其他瀏覽器和在UC瀏覽器中表現的不一樣，UC的的會比其他的瀏覽器寬，所佔位置更多
如果一個手機看到的和其他手機不一樣會比其他的手機大或者小，查看他的瀏覽器字體設置是否正常，應該是他把手機瀏覽的字號調小或者調大了（坑人的所謂的BUG）
IOS手機中如果出現一個元素的層級非常高可還是被別的元素遮蓋的，那麼就將該元素與別的元素同級
蘋果手機固定定位有bug檢查html和body是不是設置了overflow-x：hidden;