苹果手机上滑动会卡顿_苹果手机Safari浏览器下滑动卡顿的问题

一、缘起

最近在做一个项目，项目是在微信的内置浏览器上面运行的，其实就是做一个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的有效时间设置，如果不设置就会在每次对话结束后，自动清除。

苹果手机上滑动会卡顿_苹果手机Safari浏览器下滑动卡顿的问题相关推荐

web端刷卡器_在WEB浏览器使用IC卡读卡器的几种方案的对比
随着现在BS结构的程序越来越多,在BS结构的web浏览器中使用IC卡读卡器也就变得更常见了.在web浏览器中集成IC卡读卡器目前有以下几种方案: 1.使用只读读卡器将IC卡的卡号输入到焦点处. 2.使 ...
苹果手机上滑动会卡顿_苹果手机用久了出现卡顿，学会这几招，手机变得非常流畅...
虽然苹果手机的系统以及处理器非常的强大,但是用久了之后也会出现卡顿情况,那么今天就教大家几招,解决苹果手机卡顿的方法,手机就会变得非常流畅. 一.减弱动态效果进入苹果手机的[设置],找到[辅助功能] ...
苹果6严重卡顿_苹果手机iOS系统: 如果开放系统降级通道会怎么样?
苹果手机的iOS系统有一个最大的特点就是只能升级不能降级,每次系统升级之后,大约只有两周的时间让用户反悔,通过刷机的方式降级,超过了这个时间就永远不能降级了. 但是苹果每次推出新版本系统又总是出岔子, ...
苹果7手机严重卡顿_苹果手机耗电非常严重？这4个设置一定要关闭，省电不止一倍...
众所周知,手机续航一直是用户最关心也是最头疼的一件事,因为现在手机电池容量普遍在3600mAh左右,用户使用手机的频率越来越大,导致手机续航能力逐渐下降.特别是那些苹果用户,电池容量本事比安卓手机小, ...
iphone屏幕上的圆圈怎么设置_苹果手机上的小圆圈在哪设置【方法介绍】
众多的手机品牌中, 苹果手机是当之无愧的领导者,苹果在设计和功能上确实都有过人之处,就好比屏幕下方中央的圆形按钮,也就是人们常说的home键,它非常提升整个手机的质感,但是同时存在着缺陷,就是经常按 ...
iphone桌面上的圆圈怎么设置_苹果手机桌面上找不到便签记事本怎么办？有办法添加吗...
原标题:苹果手机桌面上找不到便签记事本怎么办?有办法添加吗习惯了使用安卓手机的小伙伴,可能很多人都会选择在便签或者记事本里记录待办事项.因为随着移动互联网的发展,现在很多安卓手机上都有系统自带的便签 ...
苹果手机微信语音没声音怎么回事_有没有iOS便签软件？想在苹果手机上用便签记事_敬业签官网...
经常使用安卓手机的小伙伴,很多人应该都发现了:不少安卓手机上有一款名叫"便签"的app软件.这是手机系统自带的记事备忘小工具,无需下载安装,在手机桌面上找到它并点击,即可打开记录备 ...
苹果手机还原网络设置会怎样_苹果手机信号不好怪基带？1分钟修改3个开关，轻松翻倍网速...
苹果手机一直采用英特尔基带,今年秋季发布的新款iPhone 11系列同样如此.所以信号问题一直是果粉的痛.但是苹果手机信号不好仅仅只是基带问题吗? 今天就来教大家一分钟设置两个按钮,轻松增强网速. 苹 ...
苹果手机还原网络设置会怎样_苹果手机信号差？不要慌，只要这样设置一下，从此跟信号差说拜拜...
下面我们来讲讲如何增强苹果手机信号的方法?如果你也感兴趣的,那就一起来看看吧! 一.手机信号 1.输入代码在增强苹果手机信号之前,我们需要了解一下自己所拿的手机是属于哪个基带的?只要将自己的苹果手机 ...

苹果手机上滑动会卡顿_苹果手机Safari浏览器下滑动卡顿的问题

苹果手机上滑动会卡顿_苹果手机Safari浏览器下滑动卡顿的问题相关推荐

最新文章

热门文章