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 ...
随机推荐
- 20165304 2017-2018-2 《Java程序设计》第3周学习总结
教材学习总结 类与对象学习总结 1.类:java作为面向对象型语言具有三个特性:①封装性.②继承性.③多态性.java中类是基本要素,类声明的变量叫对象.在类中定义体的函数题叫方法. 2.类与程序的基 ...
- HTML学习-2标记标签-2
三.表单元素 ①<form></form>表单标签,代表表单 主要属性:1.action提交到的页面. 2.method数据提交方式(get显示提交,有长度限制.post隐 ...
- subprocess.Popen模块
该类用于在一个新的进程中执行一个子程序.subprocess模块底层的进程创建和管理是由Popen类来处理的. 1.subprocess.Popen的构造函数 class subprocess.Pop ...
- CSS TYPOGRAPHY
CSS TYPOGRAPHY Review Great job! You learned how to style an important aspect of the user experience ...
- 尚硅谷springboot学习11-占位符
1.随机数 2.占位符获取之前配置的值,如果没有可以使用:指定默认值
- c#自定义类型的转换方式operator,以及implicit(隐式)和explicit (显示)声明
https://docs.microsoft.com/zh-cn/dotnet/csharp/language-reference/keywords/explicit https://docs.mic ...
- 正则表达式(Python)
课题 使用正则表达式匹配字符串 使用正则表达式 "\d{3}-(\d{4})-\d{2}" 匹配字符串 "123-4567-89" 返回匹配结果:'" ...
- [jQ/PHP]再谈使用JS数组储值的运用(提交PHP处理)
--------------------------------------------------------------------------------------------------- ...
- 用Delphi制作DLL
一.开使你的第一个DLL专案 1.File->Close all->File->New﹝DLL﹞代码: //自动产生Code如下 library Project2; //这有段 ...
- 初探 objc_msgSend函数
1.0 执行某个对象的方法 [receiver message] 被编译为: id objc_msgSend(id self,SEL op,...): objc_msgSend 发送信息的过程 ...