vue项目引入FastClick组件解决IOS系统下h5页面中的按钮点击延迟,连续点击无反应的问题
异常描述:
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页面中的按钮点击延迟,连续点击无反应的问题的更多相关文章
- Vue项目中将table组件导出Excel表格以及打印页面内容
体验更优排版请移步原文:http://blog.kwin.wang/programming/vue-table-export-excel-and-print.html 页面中显示的table表格,经常 ...
- ios手机访问H5页面中$(document).on绑定无效问题
1.问题描述 用amazeUI做了个手机端网站,网站头部是一个点击按钮下拉菜单,点击页面其余区域下拉菜单隐藏.在chrome模拟安卓和iOS都可以正常触发,但是在真机实测的时候,iOS上面失效了.简单 ...
- vue 项目引入字体报错
vue 项目引入特殊字体,总是提示有问题 原因是,在webpack 里面的配置有问题 在项目文件里面引入字体的时候,应该写url-loader 而不能是url
- vue项目引入社交分享插件
vshare 基于百度分享开发的支持VUE2.X的分享插件,为您带来更多的流量!提供多种风格按钮,代码加载更快,引入社会化流量,提升网页抓取速度等优点.github地址:https://github. ...
- vue项目接口管理,所有接口都在apis文件夹中统一管理
参考:https://www.codercto.com/a/53432.html 在vue开发中,会涉及到很多接口的处理,当项目足够大时,就需要定义规范统一的接口,如何定义呢? 方法可能不只一种,本文 ...
- iOS系统下 的手机屏幕尺寸 分辨率 及系统版本 总结
今天 我对iOS系统下 的手机屏幕尺寸 分辨率 及系统版本做了一次系统总结 供大家参考. 首先 是系统: 随着iOS 系统不断升级,现在已经到iOS7.0了, 并且TA有了很多新变化,最震撼的 ...
- 解决Win10系统下 C# DateTime 出现星期几的问题 解决ASP.NET MVC 接受Request Playload参数问题
解决Win10系统下 C# DateTime 出现星期几的问题 昨天晚上写代码的时候偶然发现 DateTime 里出现了星期几,当时一阵凌乱,去网上百度没有详细解决办法,很多人说可以用用 ToStri ...
- iOS下Html页面中input获取焦点弹出键盘时挡住input解决方案—scrollIntoView()
问题描述 iOS系统下,移动web页面,inpu获取焦点弹出系统虚拟键盘时,偶尔会出现挡住input的情况,尽管概率不大,但是十分影响用户体验. 问题重现 原始页面:页面中有header.main.f ...
- iOS下Html页面中input获取焦点弹出键盘时挡住input解决方案
问题描述 iOS系统下,移动web页面,inpu获取焦点弹出系统虚拟键盘时,偶尔会出现挡住input的情况,尽管概率不大,但是十分影响用户体验. 问题重现 原始页面:页面中有header.main.f ...
随机推荐
- pycharm 对数据库进行可视化操作
https://blog.csdn.net/qq_24189933/article/details/75666243
- 3:while、for 循环语句
循环就是重复的做一件事情.python 中的循环语句有 while 和 for. while 循环 while 循环必须得有一个计数器,否则会变成一个死循环. # 例如这段代码,这段程序运行之后会一直 ...
- php中的错误和异常
总结: php错误不会抛出异常,因此不能被catch,但会根据配置写入日志文件或者输出到浏览器,所以可以通过日志文件查看错误 php异常都必须自己抛出,并通过catch捕捉.SQL语句执行的错误好像可 ...
- Linux性能测试分析命令_top
top命令动态展示系统整体资源和各个进程资源占用状况,是Linux下常用的性能分析工具. top命令语法 使用格式:top [-] [d] [b] [H] [p] [q] [c] [C] [S] [s ...
- 记录在Centos下安装和使用Git的过程,从github上克隆仓库和提交。
1 安装git yum install git 2配置DNS vi /etc/resolv.conf nameserver 8.8.8.8nameserver 8.8.4.4 3 设置网关 vi /e ...
- Visual studio 2019 preview & C# 8 initial experience
Visual studio 2019 preview & C# 8 initial experience using System; using static System.Con ...
- 使用firefox插件httperrequest,模拟发送及接收Json请求 【转】
转自[http://blog.csdn.net/feixue1232/article/details/8535212] 目标:使用httpreques\Json-Handle\tcpdump\wire ...
- Android文档 学习目录
Building Your First App After you've installed the Android SDK, start with this class to learn the b ...
- Jumpserver 文档
http://docs.jumpserver.org/zh/docs/admin_guide.html
- 学JS的心路历程-Promise(二)
昨天有说到Promise的创建以及then的用法,今天我们来看错误处理. then onRejected 我们昨天有提到说,then两个函式参数,onFulfilled和onRejected,而onR ...