meta篇
1.視窗寬度
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
其中 width=device-width 是設(shè)置視窗寬度為設(shè)備視窗寬度,還可以固定寬度,例如:width=640 則是640px的寬度(常見(jiàn)于微信);
initial-scale=1.0 :設(shè)置縮放比例為1.0;
minimum-scale=1.0 和 maximum-scale=1.0 :最小縮放比例和最大縮放比例;
user-scalable=no :禁止用戶(hù)自由縮放,user-scalable 默認(rèn)值為 yes 。
提示:剛剛那個(gè)是帶全部參數(shù)的,一般常用的,有 user-scalable=no 就不用使用minimum-scale=1.0 和 maximum-scale=1.0 來(lái)強(qiáng)制禁止縮放了。
2.自動(dòng)識(shí)別格式
<meta name="format-detection" content="telephone=no"/>
content 里面的參數(shù):telephone=no 是禁止瀏覽器自動(dòng)識(shí)別手機(jī)號(hào)碼,email=no 是禁止瀏覽器自動(dòng)識(shí)別Email。
3.完整模板
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
<meta name="format-detection" content="telephone=no"/>
<meta name="format-detection" content="email=no"/>
CSS篇
body { font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif; /*使用無(wú)襯線字體*/
}
a, img { -webkit-touch-callout: none; /*禁止長(zhǎng)按鏈接與圖片彈出菜單*/
}
html, body { -webkit-user-select: none; /*禁止選中文本*/ user-select: none;}button,input,optgroup,select,textarea { -webkit-appearance:none; /*去掉webkit默認(rèn)的表單樣式*/
}
a,button,input,optgroup,select,textarea { -webkit-tap-highlight-color:rgba(0,0,0,0); /*去掉a、input和button點(diǎn)擊時(shí)的藍(lán)色外邊框和灰色半透明背景*/
}
input::-webkit-input-placeholder { color:#ccc; /*修改webkit中input的planceholder樣式*/
}
input:focus::-webkit-input-placeholder { color:#f00; /*修改webkit中focus狀態(tài)下input的planceholder樣式*/
}
body { -webkit-text-size-adjust: 100%!important; /*禁止IOS調(diào)整字體大小*/
}
input::-webkit-input-speech-button { display: none; /*隱藏Android的語(yǔ)音輸入按鈕*/
}