web移動端兼容
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" />
viewport模板
<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）
在input框獲得焦點時文字被清空用value 在input框輸入文字時被清空用placeholder
webkit表單輸入框placeholder的文字能換行麽？ios可以，android不行~,在textarea標簽下都可以換行~
html,body{
overflow: hidden;/*手機上寫overflow-x:hidden;會有兼容性問題，如果子級如果是絕對定位有運動到屏幕外的話ios7系統會出現留白*/
-webkit-overflow-scrolling:touch;/*流暢滾動,ios7下會有滑一下滑不動的情況，所以需要寫上*/
position:realtive;/*直接子級如果是絕對定位有運動到屏幕外的話，會出現留白*/
}
手機上的flex布局時會有兼容性問題，只用新版本的會出現安卓手機不識別的現象
.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+ */
}
.box>li{
-webkit-box-flex: 1.0;
box-flex: 1.0;
-webkit-flex: 1.0;
flex: 1;
width: 0;/*解決兼容性問題*/
}
輸入框的兼容性解決
input[type="text"],
input[type="date"],
input[type="tel"],
input[type="email"],
input[type="password"]{
-webkit-appearance: none;
display: block;
width: 100%;
height: 0.8rem;
line-height:normal;/*手機上的line-height不能寫成和height的值一樣，會出現再次輸入光標靠上的現象*/
background: none;
font-size: 0.32rem;
padding-left: 0.28rem;
border-radius: 0;
-webkit-border-radius: 0;
border: 1px solid #d5d5d5;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
outline: none;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);/*解決加入js後input框輸入瞬間變白的現象*/
}
禁用 radio 和 checkbox 默認樣式
input[type="radio"]::-ms-check,input[type="checkbox"]::-ms-check{
display: none;/*這樣就可以用class自定義樣式*/
}
webkit表單輸入框placeholder的顏色值
input::-webkit-input-placeholder{color:#999;}
input:focus::-webkit-input-placeholder{color:#999;}
手機上的多行省略
.overflow-hidden{
display: box !important;
display: -webkit-box !important;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;/*第幾行出現省略號*/
/*text-align:justify;不能和溢出隱藏的代碼一起寫，會有bug*/
}
文本標簽line-height：1或者是line-height等於height文字會被切掉
手機上浮動元素能寫寬盡量寫寬不然很容易出現兼容性問題,盡量不要寫高，因為內容多少不固定
給不同屏幕大小的手機設置特殊樣式
@media only screen and (min-device-width : 320px) and (max-device-width : 375px){}
<button></button>元素一定要寫上type屬性不然會默認提交表單，出現想不到的bug
某些安卓手機的自帶瀏覽器不識別onkeydown onkeypress onkeyup事件，這些事件會導致不能輸入漢字
input框若是不想輸入文字 只能讀不能寫可以加readonly屬性
手機上用背景圖寫運動，如果需要背景圖定位來實現運動效果可以用rem進行計算後加上basckground-size:圖的個數*100% 0；
寫背景圖時最好加上top left 或者0 0 不然寫運動效果時容易出現跳
彈層的關閉事件容易觸發彈層關閉後下一層的事件所以要給彈層關閉事件加上event.preventDefault()
彈層彈出後不允許屏幕滾動給彈層加mousemove事件event.preventDefault()
面包屑導航如果按照bootstrap給li加：after偽元素的話在其他瀏覽器和在UC瀏覽器中表現的不一樣，UC的的會比其他的瀏覽器寬，所占位置更多
如果一個手機看到的和其他手機不一樣 會比其他的手機大或者小，查看他的瀏覽器字體設置是否正常，應該是他把手機瀏覽的字號調小或者調大了（坑人的所謂的bug）
IOS手機中如果出現一個元素的層級非常高可還是被別的元素遮蓋的，那麽就將該元素與別的元素同級
蘋果手機固定定位有bug 檢查html和body是不是設置了overflow-x:hidden;
web移動端兼容