一、缘起
最近在做一个项目，项目是在微信的内置浏览器上面运行的，其实就是做一个Web App，然后套在微信里面跑。那么问题来了：
- Web App的首页在安卓手机上一切正常，可是一到苹果手机，首页的滑动就变卡顿了，经常拉出半截页面，底部不翼而飞。
- 登录拦截页面使用了localStorage作为本地存储，安卓手机依旧正常，苹果这厮却无限跳转登录页。
二、造成差异的原因
列位看官应该都知道，PC端浏览器浏览效果的差异是由于众多浏览器使用了五花八门的内核造成的，那么移动端呢，我想应该也是一样的，于是经过一番查阅，得出结论如下：
安卓手机：微信统一如果你的微信版本是6.1以下，微信会调用系统自带的浏览器去加载渲染页面；如果你的微信版本是6.1以上，微信就会调用QQ浏览器的X5内核去加载渲染网页。
苹果手机：不管是哪个版本，微信都会调用系统自带的浏览器去加载渲染页面，苹果手机自带的浏览器即为Safari浏览器，与Chrome浏览器一样皆为webkit内核。
至此，对于前文中所提的问题，答案已经显而易见，就是由于X5内核和webkit的差异引起的。
三、解决方案
- 关于问题1卡顿现象
添加如下代码即可：
html, body{
height: 100%;
}
*{
-webkit-overflow-scrolling: touch;
}
由于IOS 5 已经能够支持区域滚动，即
overflow: scroll
故并不需要写一堆的JS事件，来处理页面的卷动事件，并且由于-webkit-overflow-scrolling: touch;这行代码启用了硬件加速特性，所以滑动很流畅，卡顿问题自然就得以解决了。
- 关于问题2登录拦截中的localStorage失效问题
该问题是由于Private Browsing Mode引起的。
其实是启用了无痕浏览，实际上，localStorage并没有失效，只是因为无痕浏览的原因，导致其变为只读，即该无法写入localStorage，所以一直判定为未登录状态，路由自然就一直往登录页面跳转了。可使用如下代码提示用户：
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.');
}
}
当然，除了使用localStorage还可以使用cookie作为替代方案，其原理是一样的，只是需要注意cookie的有效时间设置，如果不设置就会在每次对话结束后，自动清除。
网友评论