一、緣起
最近在做一個(gè)項(xiàng)目，項(xiàng)目是在微信的內(nèi)置瀏覽器上面運(yùn)行的，其實(shí)就是做一個(gè)Web App，然后套在微信里面跑。那么問(wèn)題來(lái)了：
- Web App的首頁(yè)在安卓手機(jī)上一切正常，可是一到蘋果手機(jī)，首頁(yè)的滑動(dòng)就變卡頓了，經(jīng)常拉出半截頁(yè)面，底部不翼而飛。
- 登錄攔截頁(yè)面使用了localStorage作為本地存儲(chǔ)，安卓手機(jī)依舊正常，蘋果這廝卻無(wú)限跳轉(zhuǎn)登錄頁(yè)。
二、造成差異的原因
列位看官應(yīng)該都知道，PC端瀏覽器瀏覽效果的差異是由于眾多瀏覽器使用了五花八門的內(nèi)核造成的，那么移動(dòng)端呢，我想應(yīng)該也是一樣的，于是經(jīng)過(guò)一番查閱，得出結(jié)論如下：
安卓手機(jī)：微信統(tǒng)一如果你的微信版本是6.1以下，微信會(huì)調(diào)用系統(tǒng)自帶的瀏覽器去加載渲染頁(yè)面；如果你的微信版本是6.1以上，微信就會(huì)調(diào)用QQ瀏覽器的X5內(nèi)核去加載渲染網(wǎng)頁(yè)。
蘋果手機(jī)：不管是哪個(gè)版本，微信都會(huì)調(diào)用系統(tǒng)自帶的瀏覽器去加載渲染頁(yè)面，蘋果手機(jī)自帶的瀏覽器即為Safari瀏覽器，與Chrome瀏覽器一樣皆為webkit內(nèi)核。
至此，對(duì)于前文中所提的問(wèn)題，答案已經(jīng)顯而易見(jiàn)，就是由于X5內(nèi)核和webkit的差異引起的。
三、解決方案
- 關(guān)于問(wèn)題1卡頓現(xiàn)象
添加如下代碼即可：
html, body{
height: 100%;
}
*{
-webkit-overflow-scrolling: touch;
}
由于IOS 5 已經(jīng)能夠支持區(qū)域滾動(dòng)，即
overflow: scroll
故并不需要寫一堆的JS事件，來(lái)處理頁(yè)面的卷動(dòng)事件，并且由于-webkit-overflow-scrolling: touch;這行代碼啟用了硬件加速特性，所以滑動(dòng)很流暢，卡頓問(wèn)題自然就得以解決了。
- 關(guān)于問(wèn)題2登錄攔截中的localStorage失效問(wèn)題
該問(wèn)題是由于Private Browsing Mode引起的。
其實(shí)是啟用了無(wú)痕瀏覽，實(shí)際上，localStorage并沒(méi)有失效，只是因?yàn)闊o(wú)痕瀏覽的原因，導(dǎo)致其變?yōu)橹蛔x，即該無(wú)法寫入localStorage，所以一直判定為未登錄狀態(tài)，路由自然就一直往登錄頁(yè)面跳轉(zhuǎn)了?？墒褂萌缦麓a提示用戶：
if (typeof localStorage === 'object') {
try {
localStorage.setItem('searchHistory', searchHistory);
} catch (e) {
alert('Your web browser does not support storing settings locally. In Safari, the most common cause of this is using "Private Browsing Mode". Some settings may not save or some features may not work properly for you.');
}
}
當(dāng)然，除了使用localStorage還可以使用cookie作為替代方案，其原理是一樣的，只是需要注意cookie的有效時(shí)間設(shè)置，如果不設(shè)置就會(huì)在每次對(duì)話結(jié)束后，自動(dòng)清除。
