异常描述:

  ios系统手机中访问h5页面,按钮点击有延迟,连续点击卡顿、无反应。

异常原因:

  这要追溯至 2007 年初。苹果公司在发布首款 iPhone 前夕,遇到一个问题:当时的网站都是为大屏幕设备所设计的。于是苹果的工程师们做了一些约定,应对 iPhone 这种小屏幕浏览桌面端站点的问题。这当中最出名的,当属双击缩放(double tap to zoom),这也是会有上述 300 毫秒延迟的主要原因。双击缩放,顾名思义,即用手指在屏幕上快速点击两次,iOS 自带的 Safari 浏览器会将网页缩放至原始比例。

解决方法:

简单粗暴型——禁用页面缩放,设置 user-scalable=no。经验证,这种方法不兼容ios低版本手机,如iphone4/5等。

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1,user-scalable=no">

第三方插件——FastClick,完美兼容主流版本ios系统手机。

html页面中直接使用:

<script src="https://cdn.bootcss.com/fastclick/1.0.6/fastclick.js"></script>
<script>
window.onload=function(){
  FastClick.attach(document.body)
}
</script>

vue项目中使用:

#安装fastclick组件
npm install fastclick --save-dev
#引入FastClick
import FastClick from 'fastclick' //在created或monted生命周期中将FastClick绑定到body
FastClick.attach(document.body)

vue项目引入FastClick组件解决IOS系统下h5页面中的按钮点击延迟,连续点击无反应的问题的更多相关文章

  1. Vue项目中将table组件导出Excel表格以及打印页面内容

    体验更优排版请移步原文:http://blog.kwin.wang/programming/vue-table-export-excel-and-print.html 页面中显示的table表格,经常 ...

  2. ios手机访问H5页面中$(document).on绑定无效问题

    1.问题描述 用amazeUI做了个手机端网站,网站头部是一个点击按钮下拉菜单,点击页面其余区域下拉菜单隐藏.在chrome模拟安卓和iOS都可以正常触发,但是在真机实测的时候,iOS上面失效了.简单 ...

  3. vue 项目引入字体报错

    vue 项目引入特殊字体,总是提示有问题 原因是,在webpack 里面的配置有问题 在项目文件里面引入字体的时候,应该写url-loader 而不能是url

  4. vue项目引入社交分享插件

    vshare 基于百度分享开发的支持VUE2.X的分享插件,为您带来更多的流量!提供多种风格按钮,代码加载更快,引入社会化流量,提升网页抓取速度等优点.github地址:https://github. ...

  5. vue项目接口管理,所有接口都在apis文件夹中统一管理

    参考:https://www.codercto.com/a/53432.html 在vue开发中,会涉及到很多接口的处理,当项目足够大时,就需要定义规范统一的接口,如何定义呢? 方法可能不只一种,本文 ...

  6. iOS系统下 的手机屏幕尺寸 分辨率 及系统版本 总结

    今天  我对iOS系统下 的手机屏幕尺寸 分辨率 及系统版本做了一次系统总结 供大家参考. 首先 是系统:    随着iOS 系统不断升级,现在已经到iOS7.0了, 并且TA有了很多新变化,最震撼的 ...

  7. 解决Win10系统下 C# DateTime 出现星期几的问题 解决ASP.NET MVC 接受Request Playload参数问题

    解决Win10系统下 C# DateTime 出现星期几的问题 昨天晚上写代码的时候偶然发现 DateTime 里出现了星期几,当时一阵凌乱,去网上百度没有详细解决办法,很多人说可以用用 ToStri ...

  8. iOS下Html页面中input获取焦点弹出键盘时挡住input解决方案—scrollIntoView()

    问题描述 iOS系统下,移动web页面,inpu获取焦点弹出系统虚拟键盘时,偶尔会出现挡住input的情况,尽管概率不大,但是十分影响用户体验. 问题重现 原始页面:页面中有header.main.f ...

  9. iOS下Html页面中input获取焦点弹出键盘时挡住input解决方案

    问题描述 iOS系统下,移动web页面,inpu获取焦点弹出系统虚拟键盘时,偶尔会出现挡住input的情况,尽管概率不大,但是十分影响用户体验. 问题重现 原始页面:页面中有header.main.f ...

随机推荐

  1. 机器学习进阶-阈值与平滑-图像阈值 1. cv2.threshold(进行阈值计算) 2. 参数type cv2.THRESH_BINARY(表示进行二值化阈值计算)

    1. ret, dst = cv2.thresh(src, thresh, maxval, type) 参数说明, src表示输入的图片, thresh表示阈值, maxval表示最大值, type表 ...

  2. centos7 Apache 2.4.6 多域名多网站配置

    Apache 2.4.6 多域名多网站配置 在/etc/httpd/conf 下 编辑 vim httpd.conf 添加:ServerName 外网IP 并注释 #DocumentRoot &quo ...

  3. SQL SERVER 2000安装遇到的问题小汇总(转载)

    [1]安装程序配置服务器失败需要修改下注册表1 打开注册表 在"开始"--"运行"键入 "regedit"  2 删除注册表如下键值: HK ...

  4. 函数mmap()的使用

    函数mmap是linux的一个系统函数.如下: 函数原型:void *mmap(void *addr, size_t length, int prot, int flags,int fd, off_t ...

  5. 红警2在Y460和win10下运行

    1.将电源模式改为高性能模式 2.以WinXP兼容模式运行 3.修改RA2.ini文件 在[Video]下加入以下代码 : AllowHiResModes=yes VideoBackBuffer=no ...

  6. 关于GC.Collect在不同机器上表现不一致问题

    2019.1.17,昨天项目更新后策划反应: 游戏卡,表现为:每走几步就卡一下.前天还没有. 但在我本机测试中,却没有任何卡顿感. QC同学的机器也卡.我去看了下,打开Profiler,没开deep, ...

  7. ReactiveX 学习笔记(14)使用 RxJava2 + Retrofit2 调用 REST API

    JSON : Placeholder JSON : Placeholder (https://jsonplaceholder.typicode.com/) 是一个用于测试的 REST API 网站. ...

  8. 【370】Python列表生成式(for 写入一行)

    参考: python用列表生成式写嵌套循环的方法_python_脚本之家 参考: python之列表生成式 - 旷野足迹 - 博客园 对于读取Twitter数据最终会得到一个超级复杂的json文件, ...

  9. Hibernate学习笔记2.3(Hibernate基础配置)

    映射,注释可以放在成员变量上面,也可以放在get方法上面 写在成员变量的话 破坏了java的面向对象思维 直接让hibernate访问内部的私有元素 要是能直接设指不合适哈哈 所以主张写在get方法上 ...

  10. 学习BOS物流项目第十天

    1 教学计划 1.演示权限demo 2.权限概述 a. 认证 b. 授权 3.常见的权限控制方式 a.  url拦截权限控制 b.  方法注解权限控制 4.创建权限数据模型 a.  权限表 b.  角 ...