移動(dòng)端開發(fā)的兼容問題
1. button高亮顯示問題
問題：
點(diǎn)擊置灰狀態(tài)的button按鈕，按鈕會(huì)閃一下藍(lán)色，這和我原本的樣式?jīng)_突。在此之前已經(jīng)清除了outline：none，:active偽類元素等造成的影響，那么為什么還是會(huì)有這種現(xiàn)象。
我們?cè)谧鲆苿?dòng)端開發(fā)的時(shí)候忽略了一個(gè)鮮為人知的屬性。 -webkit-tap-highlight-color。它的功能是移動(dòng)端點(diǎn)擊時(shí)的背景設(shè)置。這個(gè)屬性只適用于ios。當(dāng)我們點(diǎn)擊button時(shí)，它會(huì)高亮顯示。outline：none在移動(dòng)端這時(shí)是不起作用的，想要去除文本框的默認(rèn)樣式使用的是-webkit-appearance，在iOS上加上這個(gè)屬性才能給按鈕和輸入框自定義樣式，聚焦時(shí)取消默認(rèn)樣式是-webkit-tap-highlight-color。
解決方案：
在這個(gè)元素上面加上 -webkit-tap-highlight-color:transparent; -webkit-appearance: none; 就可以解決上面這個(gè)問題了。
補(bǔ)充：
-webkit-user-select: none; // 禁止頁面文字選擇 ，此屬性不繼承，一般加在body上規(guī)定整個(gè)body的文字都不會(huì)自動(dòng)調(diào)整。但是它會(huì)導(dǎo)致input/textarea輸入框無法輸入，我們寫的時(shí)候要注意。
-webkit-touch-callout:none; 禁用長(zhǎng)按頁面時(shí)的彈出菜單(iOS下有效) ,取消了放大鏡?效果。但是注意的是在企業(yè)微信里面這個(gè)是不起作用的，長(zhǎng)按依舊會(huì)有放大鏡效果。
2. ios字體問題
問題：
對(duì)于手機(jī)上的字體來說，我們不能控制。我們主要針對(duì)字體修改的就是：襯線與非襯線、順滑設(shè)置。
3. 多行文本溢出失效
問題：
正常情況下，我們默認(rèn)最多顯示三行文字，代碼如下所示。但是我們?cè)趯彶樵氐臅r(shí)候發(fā)現(xiàn)-webkit-box-orient: vertical;失效。
解決方案:
這是由于webpack打包時(shí)，optimize-css-assets-webpack-plugin這個(gè)插件造成的。注釋掉webpack.prod.conf.js中下面的代碼就可以了。
4. ES6新特性：symbol類型造成的問題
問題
在項(xiàng)目中，我需要?jiǎng)h除數(shù)組中的某個(gè)元素，代碼如下。
解決方案
使用splice方法，遍歷重新拿到tag數(shù)組，然后賦給tag
6.長(zhǎng)時(shí)間按住頁面出現(xiàn)閃退
element {undefined
? -webkit-touch-callout:none;
}
7.iphone及ipad下輸入框默認(rèn)內(nèi)陰影
Element{undefined
? -webkit-appearance:none;
}
8.旋轉(zhuǎn)屏幕時(shí)，字體大小調(diào)整的問題
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6{undefined
? -webkit-text-size-adjust:100%;
}
9.圓角bug
某些Android手機(jī)圓角失效
background-clip: padding-box;
10.設(shè)置緩存
<meta http-equiv="Cache-Control"content="no-cache"/>
手機(jī)頁面通常在第一次加載后會(huì)進(jìn)行緩存，然后每次刷新會(huì)使用緩存而不是去重新向服務(wù)器發(fā)送請(qǐng)求。如果不希望使用緩存可以設(shè)置no-cache。
移動(dòng)端點(diǎn)擊300ms延遲
300ms尚可接受，不過因?yàn)?00ms產(chǎn)生的問題，我們必須要解決。300ms導(dǎo)致用戶體驗(yàn)并不是很好，解決這個(gè)問題，我們一般在移動(dòng)端用tap事件來取代click事件。
推薦兩個(gè)js，一個(gè)是fastclick，一個(gè)是tap.js
關(guān)于300ms延遲，具體請(qǐng)看：http://thx.github.io/mobile/300ms-click-delay/
ios和android下觸摸元素時(shí)出現(xiàn)半透明灰色遮罩
Element {undefined
? -webkit-tap-highlight-color:rgba(255,255,255,0)
}
設(shè)置alpha值為0就可以去除半透明灰色遮罩，備注：transparent的屬性值在android下無效。
后面一篇文章有詳細(xì)介紹，地址：http://www.jb51.net/post/phone_web_ysk
桌面圖標(biāo)
<link rel="apple-touch-icon"href="touch-icon-iphone.png"/>
<link rel="apple-touch-icon"sizes="76x76"href="touch-icon-ipad.png"/>
<link rel="apple-touch-icon"sizes="120x120"href="touch-icon-iphone-retina.png"/>
<link rel="apple-touch-icon"sizes="152x152"href="touch-icon-ipad-retina.png"/>
iOS下針對(duì)不同設(shè)備定義不同的桌面圖標(biāo)。如果不定義則以當(dāng)前屏幕截圖作為圖標(biāo)。
上面的寫法可能大家會(huì)覺得會(huì)有默認(rèn)光澤，下面這種設(shè)置方法可以去掉光澤效果，還原設(shè)計(jì)圖的效果！
? <link rel="apple-touch-icon-precomposed"href="touch-icon-iphone.png"/>
圖片尺寸可以設(shè)定為5757（px）或者Retina可以定為114114（px），ipad尺寸為72*72（px)
啟動(dòng)畫面
<link rel="apple-touch-startup-image"href="start.png"/>
iOS下頁面啟動(dòng)加載時(shí)顯示的畫面圖片，避免加載時(shí)的白屏。
可以通過madia來指定不同的大?。?/p>
<!--iPhone-->
<link href="apple-touch-startup-image-320x460.png"media="(device-width: 320px)" rel="apple-touch-startup-image"/>
<!-- iPhone Retina -->
<link href="apple-touch-startup-image-640x920.png"media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"/>
<!-- iPhone 5-->
<link rel="apple-touch-startup-image"media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="apple-touch-startup-image-640x1096.png">
<!-- iPad portrait-->
<link href="apple-touch-startup-image-768x1004.png"media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image"/>
<!-- iPad landscape-->
<link href="apple-touch-startup-image-748x1024.png"media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image"/>
<!-- iPad Retina portrait-->
<link href="apple-touch-startup-image-1536x2008.png"media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"/>
<!-- iPad Retina landscape-->
<link href="apple-touch-startup-image-1496x2048.png"media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)"rel="apple-touch-startup-image"/>
IOS中input鍵盤事件keyup、keydown、keypress支持不是很好
問題是這樣的，用input search做模糊搜索的時(shí)候，在鍵盤里面輸入關(guān)鍵詞，會(huì)通過ajax后臺(tái)查詢，然后返回?cái)?shù)據(jù)，然后再對(duì)返回的數(shù)據(jù)進(jìn)行關(guān)鍵詞標(biāo)紅。用input監(jiān)聽鍵盤keyup事件，在安卓手機(jī)瀏覽器中是可以的，但是在ios手機(jī)瀏覽器中變紅很慢，用輸入法輸入之后，并未立刻相應(yīng)keyup事件，只有在通過刪除之后才能相應(yīng)！
ios 設(shè)置input 按鈕樣式會(huì)被默認(rèn)樣式覆蓋
解決方式如下：
input,
textarea {undefined
? border: 0;
? -webkit-appearance: none;
}
設(shè)置默認(rèn)樣式為none
解決辦法：
可以用html5的oninput事件去代替keyup
<input type="text"id="testInput">
<script type="text/javascript">
? document.getElementById('testInput').addEventListener('input',function(e){undefined
? ? varvalue = e.target.value;
? });
</script>
