一、緣起
最近在做一個(gè)項(xiàng)目，項(xiàng)目是在微信的內(nèi)置瀏覽器上面運(yùn)行的，其實(shí)就是做一個(gè)Web App，然后套在微信里面跑。那么問題來了：
- Web App的首頁在安卓手機(jī)上一切正常，可是一到蘋果手機(jī)，首頁的滑動就變卡頓了，經(jīng)常拉出半截頁面，底部不翼而飛。
- 登錄攔截頁面使用了localStorage作為本地存儲，安卓手機(jī)依舊正常，蘋果這廝卻無限跳轉(zhuǎn)登錄頁。
二、造成差異的原因
列位看官應(yīng)該都知道，PC端瀏覽器瀏覽效果的差異是由于眾多瀏覽器使用了五花八門的內(nèi)核造成的，那么移動端呢，我想應(yīng)該也是一樣的，于是經(jīng)過一番查閱，得出結(jié)論如下：
安卓手機(jī)：微信統(tǒng)一如果你的微信版本是6.1以下，微信會調(diào)用系統(tǒng)自帶的瀏覽器去加載渲染頁面；如果你的微信版本是6.1以上，微信就會調(diào)用QQ瀏覽器的X5內(nèi)核去加載渲染網(wǎng)頁。
蘋果手機(jī)：不管是哪個(gè)版本，微信都會調(diào)用系統(tǒng)自帶的瀏覽器去加載渲染頁面，蘋果手機(jī)自帶的瀏覽器即為Safari瀏覽器，與Chrome瀏覽器一樣皆為webkit內(nèi)核。
至此，對于前文中所提的問題，答案已經(jīng)顯而易見，就是由于X5內(nèi)核和webkit的差異引起的。
三、解決方案
- 關(guān)于問題1卡頓現(xiàn)象
添加如下代碼即可：
html, body{
height: 100%;
}
*{
-webkit-overflow-scrolling: touch;
}
由于IOS 5 已經(jīng)能夠支持區(qū)域滾動，即
overflow: scroll
故并不需要寫一堆的JS事件，來處理頁面的卷動事件，并且由于-webkit-overflow-scrolling: touch;這行代碼啟用了硬件加速特性，所以滑動很流暢，卡頓問題自然就得以解決了。
- 關(guān)于問題2登錄攔截中的localStorage失效問題
該問題是由于Private Browsing Mode引起的。
其實(shí)是啟用了無痕瀏覽，實(shí)際上，localStorage并沒有失效，只是因?yàn)闊o痕瀏覽的原因，導(dǎo)致其變?yōu)橹蛔x，即該無法寫入localStorage，所以一直判定為未登錄狀態(tài)，路由自然就一直往登錄頁面跳轉(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è)置就會在每次對話結(jié)束后，自動清除。
