一：iPhone中 overflow:scroll 橫向或縱向滑動(dòng)速度慢或者卡羡铲，感覺(jué)很不流暢微猖，只需要對(duì)滾動(dòng)元素設(shè)置：
-webkit-overflow-scrolling:touch;
overflow-scrolling:touch;
二：flex布局下，子元素A設(shè)置了固定寬度组去，但由于另一個(gè)子元素B內(nèi)容過(guò)寬導(dǎo)致A元素被擠壓爷抓，實(shí)際寬度不是原來(lái)定義的寬度势决，此時(shí)需要對(duì)A元素設(shè)置：
flex-shrink:0;
A元素將不會(huì)再被擠壓
三：ios和android下點(diǎn)擊元素時(shí)出現(xiàn)灰色陰影背景
-webkit-tap-highlight-color:rgba(255,255,255,0);
四：禁止復(fù)制、選中文本
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
五：去除iphone上輸入框內(nèi)陰影等默認(rèn)樣式
border: 0;
-webkit-appearance:none;
六：去除input獲取焦點(diǎn)時(shí)出現(xiàn)的默認(rèn)邊框
outline:none
七：禁止iPhone和Android橫屏或豎屏模式下字體自動(dòng)縮放：
-webkit-text-size-adjust:none;
-ms-text-size-adjust:100%;
text-size-adjust:100%;
八：部分Android手機(jī)圓角效果失效：
background-clip:padding-box;
九：設(shè)置瀏覽器不緩存：
<meta http-equiv="Cache-Control" content="no-cache" />
十：input設(shè)置type=number時(shí)蓝撇，maxlength失效的問(wèn)題
<input type="number" oninput="checkLength(this ,10)">
function checkLength(obj, length) {
if(obj.value.length > length) {
obj.value = obj.value.substr(0, length);
}
}
十一：input設(shè)置type=number時(shí)果复，form提交的時(shí)候默認(rèn)給取整的問(wèn)題
<input type="number" step="0.01" />
input的type為number時(shí)，會(huì)默認(rèn)生成上下箭頭調(diào)整數(shù)值渤昌，step=0.01,可以允許輸入2位小數(shù)虽抄，點(diǎn)擊上下箭頭分別增加0.01和減少0.01。
十二：去除input的type為numbe時(shí)的默認(rèn)箭頭：
input[type=number] {
-moz-appearance:textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
十三：IOS鍵盤(pán)字母輸入独柑，默認(rèn)首字母大寫(xiě)
<input type="text" autocapitalize="off" />
十四：IOS鍵盤(pán)迈窟，中文輸入法輸入英文時(shí)，字母之間可能會(huì)出現(xiàn)一個(gè)六分之一空格忌栅，可以通過(guò)正則去掉
this.value = this.value.replace(/\u2006/g, ‘‘);
十五：IOS下可能對(duì)非可點(diǎn)擊元素如(label,span)監(jiān)聽(tīng)click事件车酣，不會(huì)觸發(fā)，加上一行CSS代碼即可：
cursor:pointer;
十六：禁止 iOS 識(shí)別長(zhǎng)串?dāng)?shù)字為電話
<meta name="format-detection" content="telephone=no" />
默認(rèn)情況下索绪，設(shè)備會(huì)自動(dòng)識(shí)別任何可能是電話號(hào)碼的字符串
十七：禁止保存或拷貝圖像
img{-webkit-touch-callout: none;}
十八：浮動(dòng)子元素?zé)o法撐開(kāi)父元素高度湖员，給父元素設(shè)置：
overflow:hidden;
十九：display:inline-block的元素之間有間距，或者它的父元素高度大于其本身瑞驱，這是網(wǎng)頁(yè)默認(rèn)的空白間距娘摔，需要給父元素設(shè)置：
font-size:0;
二十：calc的兼容處理，CSS3中的calc變量在iOS6瀏覽器中必須加-webkit-前綴唤反，目前的FF瀏覽器已經(jīng)無(wú)需-moz-前綴凳寺。 Android瀏覽器目前仍然不支持calc，所以要在之前增加一個(gè)保守尺寸：
div {
width: 80%;
width: -webkit-calc(100% - 100px);
width: calc(100% - 100px);
}
二十一：設(shè)置select 下拉框文字右對(duì)齊:
select option {
direction: rtl;
}
二十二：移動(dòng)端 HTML5 audio autoplay 失效問(wèn)題
這個(gè)不是 BUG彤侍，由于自動(dòng)播放網(wǎng)頁(yè)中的音頻或視頻肠缨，會(huì)給用戶(hù)帶來(lái)一些困擾或者不必要的流量消耗，所以蘋(píng)果系統(tǒng)和安卓系統(tǒng)通常都會(huì)禁止自動(dòng)播放和使用 JS 的觸發(fā)播放拥刻，必須由用戶(hù)來(lái)觸發(fā)才可以播放怜瞒。
解決方法：先通過(guò)用戶(hù) touchstart 觸碰父泳，觸發(fā)播放并暫停（音頻開(kāi)始加載般哼，后面用 JS 再操作就沒(méi)問(wèn)題了）吴汪。
document.addEventListener('touchstart', function () {
document.getElementsByTagName('audio')[0].play();
document.getElementsByTagName('audio')[0].pause();
});
二十三：移動(dòng)端 HTML5 input date 不支持 placeholder 問(wèn)題
<input placeholder="txt" type="text" onfocus="(this.type='date')" >
部分Android機(jī)型需要點(diǎn)擊兩次，目前沒(méi)有想到什么好的辦法
二十四：網(wǎng)頁(yè)適應(yīng)移動(dòng)端并禁止網(wǎng)頁(yè)縮放
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
user-scalable=no和,user-scalable=0效果一樣
二十五：apple-mobile-web-app-capable設(shè)置Web應(yīng)用是否以全屏模式運(yùn)行
<meta name="apple-mobile-web-app-capable" content="yes">
content的默認(rèn)值是no蒸眠，表示正常顯示漾橙。可通過(guò)只讀屬性window.navigator.standalone來(lái)確定網(wǎng)頁(yè)是否以全屏模式顯示楞卡。
二十七：實(shí)現(xiàn)橫屏豎屏的方案
1.使用 css3媒體查詢(xún)霜运，缺點(diǎn)是寬度和高度不好控制
@media screen and (orientation: portrait) {
.main {
-webkit-transform:rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
width: 100vh;
height: 100vh;
/*去掉overflow 微信顯示正常，但是瀏覽器有問(wèn)題蒋腮，豎屏?xí)r強(qiáng)制橫屏縮小*/
overflow: hidden;
}
}
@media screen and (orientation: landscape) {
.main {
-webkit-transform:rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0)
}
}
2.使用js 判斷屏幕的方向或者resize事件
var evt = "onorientationchange" in window ? "orientationchange" : "resize";
window.addEventListener(evt, function() {
var width = document.documentElement.clientWidth;
var height = document.documentElement.clientHeight;
$print = $('#print');
if( width > height ){
$print.width(width);
$print.height(height);
$print.css('top', 0 );
$print.css('left', 0 );
$print.css('transform' , 'none');
$print.css('transform-origin' , '50% 50%');
}
else{
$print.width(height);
$print.height(width);
$print.css('top', (height-width)/2 );
$print.css('left', 0-(height-width)/2 );
$print.css('transform' , 'rotate(90deg)');
$print.css('transform-origin' , '50% 50%');
}
}, false);
二十八：網(wǎng)頁(yè)調(diào)用Android或者IOS的撥號(hào)功能
<a href="tel:110">110</a>
二十九：網(wǎng)頁(yè)長(zhǎng)時(shí)間按住頁(yè)面出現(xiàn)閃退
div{
-webkit-touch-callout: none;
}
三十：CSS動(dòng)畫(huà)頁(yè)面閃白,動(dòng)畫(huà)卡頓,啟用硬件加速
-webkit-transform:translate3d(0, 0, 0);
-moz-transform:translate3d(0, 0, 0);
-ms-transform:translate3d(0, 0, 0);
transform:translate3d(0, 0, 0);
盡可能地使用合成屬性transform和opacity來(lái)設(shè)計(jì)CSS3動(dòng)畫(huà)淘捡，不使用position的left和top來(lái)定位
三十一：去除谷歌瀏覽器在輸入框填充黃色背景
input:-webkit-autofill{
-webkit-box-shadow: 0 0 0 1000px white inset;
}
input[type=text]:focus, input[type=password]:focus{
-webkit-box-shadow: 0 0 0 1000px white inset;
參考鏈接：
http://www.reibang.com/p/dc2c4613e60c
https://blog.csdn.net/smile_to_lin/article/details/75349122
原文作者技術(shù)博客：http://www.reibang.com/u/ac4daaeecdfe
95后前端妹子一枚，愛(ài)閱讀池摧，愛(ài)交友焦除，將工作中遇到的問(wèn)題記錄在這里，希望給每一個(gè)看到的你能帶來(lái)一點(diǎn)幫助作彤。
歡迎留言交流膘魄。
