H5頁面窗口自動(dòng)調(diào)整到設(shè)備寬度，并禁止用戶縮放頁面
（部分安卓手機(jī)的UC瀏覽器寫完以后還是可以放大縮小）
忽略將頁面中的數(shù)字識(shí)別為電話號(hào)碼
（ios上會(huì)明顯 有時(shí)候會(huì)把數(shù)字當(dāng)成電話號(hào)碼）
忽略Android平臺(tái)中對郵箱地址的識(shí)別
.css{-webkit-appearance:none;}?（ios上的下拉框會(huì)有圓角，所以要寫border-radius:0）
在input框獲得焦點(diǎn)時(shí)文字被清空用value?在input框輸入文字時(shí)被清空用placeholder
webkit表單輸入框placeholder的文字能換行么？ios可以，android不行~,在textarea標(biāo)簽下都可以換行~
html,body{
overflow:?hidden;/*手機(jī)上寫overflow-x:hidden;會(huì)有兼容性問題，如果子級如果是絕對定位有運(yùn)動(dòng)到屏幕外的話ios7系統(tǒng)會(huì)出現(xiàn)留白*/
-webkit-overflow-scrolling:touch;/*流暢滾動(dòng),ios7下會(huì)有滑一下滑不動(dòng)的情況，所以需要寫上*/
position:realtive;/*直接子級如果是絕對定位有運(yùn)動(dòng)到屏幕外的話，會(huì)出現(xiàn)留白*/
}
手機(jī)上的flex布局時(shí)會(huì)有兼容性問題，只用新版本的會(huì)出現(xiàn)安卓手機(jī)不識(shí)別的現(xiàn)象
.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;/*手機(jī)上的line-height不能寫成和height的值一樣，會(huì)出現(xiàn)再次輸入光標(biāo)靠上的現(xiàn)象*/
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框輸入瞬間變白的現(xiàn)象*/
}
禁用?radio?和?checkbox?默認(rèn)樣式
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;}
手機(jī)上的多行省略
.overflow-hidden{
display:?box?!important;
display:?-webkit-box?!important;
overflow:?hidden;
text-overflow:?ellipsis;
-webkit-box-orient:?vertical;
-webkit-line-clamp:?4;/*第幾行出現(xiàn)省略號(hào)*/
/*text-align:justify;不能和溢出隱藏的代碼一起寫，會(huì)有bug*/
}
文本標(biāo)簽line-height：1或者是line-height等于height文字會(huì)被切掉
手機(jī)上浮動(dòng)元素能寫寬盡量寫寬不然很容易出現(xiàn)兼容性問題,盡量不要寫高，因?yàn)閮?nèi)容多少不固定
給不同屏幕大小的手機(jī)設(shè)置特殊樣式
@media?only?screen??and?(min-device-width?:?320px)??and?(max-device-width?:?375px){}
元素一定要寫上type屬性不然會(huì)默認(rèn)提交表單，出現(xiàn)想不到的bug
某些安卓手機(jī)的自帶瀏覽器不識(shí)別onkeydown?onkeypress?onkeyup事件，這些事件會(huì)導(dǎo)致不能輸入漢字
input框若是不想輸入文字?只能讀不能寫可以加readonly屬性
手機(jī)上用背景圖寫運(yùn)動(dòng)，如果需要背景圖定位來實(shí)現(xiàn)運(yùn)動(dòng)效果可以用rem進(jìn)行計(jì)算后加上basckground-size:圖的個(gè)數(shù)*100%?0；
寫背景圖時(shí)最好加上top?left?或者0?0?不然寫運(yùn)動(dòng)效果時(shí)容易出現(xiàn)跳
彈層的關(guān)閉事件容易觸發(fā)彈層關(guān)閉后下一層的事件所以要給彈層關(guān)閉事件加上event.preventDefault()
彈層彈出后不允許屏幕滾動(dòng)給彈層加mousemove事件event.preventDefault()
面包屑導(dǎo)航如果按照bootstrap給li加：after偽元素的話在其他瀏覽器和在UC瀏覽器中表現(xiàn)的不一樣，UC的的會(huì)比其他的瀏覽器寬，所占位置更多
如果一個(gè)手機(jī)看到的和其他手機(jī)不一樣?會(huì)比其他的手機(jī)大或者小，查看他的瀏覽器字體設(shè)置是否正常，應(yīng)該是他把手機(jī)瀏覽的字號(hào)調(diào)小或者調(diào)大了（坑人的所謂的bug）
IOS手機(jī)中如果出現(xiàn)一個(gè)元素的層級非常高可還是被別的元素遮蓋的，那么就將該元素與別的元素同級
蘋果手機(jī)固定定位有bug?檢查html和body是不是設(shè)置了overflow-x:hidden;
原文：http://blog.csdn.net/zhangmeng1020/article/details/50886185
