轉(zhuǎn)自
H5頁(yè)面窗口自動(dòng)調(diào)整到設(shè)備寬度，并禁止用戶(hù)縮放頁(yè)面
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
（部分安卓手機(jī)的UC瀏覽器寫(xiě)完以后還是可以放大縮?。?br>
忽略將頁(yè)面中的數(shù)字識(shí)別為電話(huà)號(hào)碼
<meta name="format-detection" content="telephone=no" />（iOS上會(huì)明顯 有時(shí)候會(huì)把數(shù)字當(dāng)成電話(huà)號(hào)碼）
忽略Android平臺(tái)中對(duì)郵箱地址的識(shí)別
<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表單元素的默認(rèn)外觀怎么重置
.css{-webkit-appearance:none;} （ios上的下拉框會(huì)有圓角，所以要寫(xiě)border-radius:0）
在input框獲得焦點(diǎn)時(shí)文字被清空用value 在input框輸入文字時(shí)被清空用placeholder
webkit表單輸入框placeholder的文字能換行么？ios可以，android不行,在textarea標(biāo)簽下都可以換行
html,body{
overflow: hidden;/手機(jī)上寫(xiě)overflow-x:hidden;會(huì)有兼容性問(wèn)題，如果子級(jí)如果是絕對(duì)定位有運(yùn)動(dòng)到屏幕外的話(huà)ios7系統(tǒng)會(huì)出現(xiàn)留白/
-webkit-overflow-scrolling:touch;/流暢滾動(dòng),ios7下會(huì)有滑一下滑不動(dòng)的情況，所以需要寫(xiě)上/
position:realtive;/直接子級(jí)如果是絕對(duì)定位有運(yùn)動(dòng)到屏幕外的話(huà)，會(huì)出現(xiàn)留白/
}
手機(jī)上的flex布局時(shí)會(huì)有兼容性問(wèn)題，只用新版本的會(huì)出現(xiàn)安卓手機(jī)不識(shí)別的現(xiàn)象
.box{
display: -webkit-box; /* 老版本語(yǔ)法: Safari, iOS, Android browser, older WebKit browsers. /
display: -moz-box; / 老版本語(yǔ)法: Firefox (buggy) /
display: -ms-flexbox; / 混合版本語(yǔ)法: IE 10 /
display: -webkit-flex; / 新版本語(yǔ)法: Chrome 21+ /
display: flex; / 新版本語(yǔ)法: Opera 12.1, Firefox 22+ /
}
.box>li{
-webkit-box-flex: 1.0;
box-flex: 1.0;
-webkit-flex: 1.0;
flex: 1;
width: 0;/解決兼容性問(wèn)題*/
}
輸入框的兼容性解決
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不能寫(xiě)成和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;不能和溢出隱藏的代碼一起寫(xiě)，會(huì)有bug/
}
文本標(biāo)簽line-height：1或者是line-height等于height文字會(huì)被切掉
手機(jī)上浮動(dòng)元素能寫(xiě)寬盡量寫(xiě)寬不然很容易出現(xiàn)兼容性問(wèn)題,盡量不要寫(xiě)高，因?yàn)閮?nèi)容多少不固定
給不同屏幕大小的手機(jī)設(shè)置特殊樣式
@media only screen and (min-device-width : 320px) and (max-device-width : 375px){}
<button></button>元素一定要寫(xiě)上type屬性不然會(huì)默認(rèn)提交表單，出現(xiàn)想不到的bug
某些安卓手機(jī)的自帶瀏覽器不識(shí)別onkeydown onkeypress onkeyup事件，這些事件會(huì)導(dǎo)致不能輸入漢字
input框若是不想輸入文字 只能讀不能寫(xiě)可以加readonly屬性
手機(jī)上用背景圖寫(xiě)運(yùn)動(dòng)，如果需要背景圖定位來(lái)實(shí)現(xiàn)運(yùn)動(dòng)效果可以用rem進(jìn)行計(jì)算后加上basckground-size:圖的個(gè)數(shù)*100% 0；
寫(xiě)背景圖時(shí)最好加上top left 或者0 0 不然寫(xiě)運(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偽元素的話(huà)在其他瀏覽器和在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í)非常高可還是被別的元素遮蓋的，那么就將該元素與別的元素同級(jí)
蘋(píng)果手機(jī)固定定位有bug 檢查html和body是不是設(shè)置了overflow-x:hidden;
