异常描述:

  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. 查找nginx安装的路径

    你可以用这两个命令,找安装启用的路径 netstat -tnlp|grep nginx 然后看到一行记录,复制最后的一个数据(进程ID) ps -aux |grep 进程ID 就可以看到 NINGX的 ...

  2. Java快速开发平台强大的代码生成器,JEECG 3.7.5 VUE+ElementUI SPA单页面应用版本发布

    JEECG 3.7.5 VUE+ElementUI SPA单页面应用版本发布 此版本为Vue+ElementUI SPA单页面应用版本,提供新一代风格代码生成器模板,采用Vue技术,提供两套精美模板E ...

  3. 小程序登录&授权&获取用户信息

    一 .登录 时序图如下: wx.login() 获取js_code 示例代码: App({   onLaunch: function() {     wx.login({       success: ...

  4. day02-格式化输出

    python格式化字符串有%和{}两种 字符串格式控制符. 字符串输入数据格式类型(%格式操作符号) %%百分号标记%c字符及其ASCII码%s字符串%d有符号整数(十进制)%u无符号整数(十进制)% ...

  5. Spring boot 日志

    修改spring boot 默认日志的配置 #logging.path= # 不指定路径在当前项目下生成springboot.log日志 # 可以指定完整的路径: #logging.file=G:/s ...

  6. linux下安装Tomcat7.0

    1.下载安装文件:Download apache-tomcat-7.0.14.tar.gz        下载1              下载 2.输入命令解压文件:tar - zxvf apach ...

  7. RH_KABI_RESERVE的使用

    struct mm_struct { .......... #if defined(__GENKSYMS__) || !defined(CONFIG_SPAPR_TCE_IOMMU) /* We're ...

  8. wx小程序自定义组件与页面之间参数传递

    在开发中,很多页面中会使用相同的组件,这时可以将具有相同信息的部分封装成一个组件,方便开发中调用.在调用中可能会涉及到数据的传递问题,例如页面与组件,组件与组件直接的数据传递. 首先看看页面与组件直接 ...

  9. 118/119. Pascal's Triangle/II

    原文题目: 118. Pascal's Triangle 119. Pascal's Triangle II 读题: 杨辉三角问题 '''118''' class Solution(object): ...

  10. 【原创】利用Office宏实现powershell payload远控

    本文将演示使用Veil-Evasion生成远控所需要的payload以及监听器,然后使用MacroShop生成payload 相关的VBA代码,最后演示将VBA代码写入.doc文本文档的宏中. 环境: ...