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 ...
随机推荐
- sql server 2014登录账号
NT Service\MSSQL$MSSQLSERVER2014NT Service\MSSQLSERVER 尝试打开或创建物理文件 'E:\aaa.mdf' 时,CREATE FILE 遇到操作系统 ...
- Spring boot 错误处理机制
请求方式时,若不存在 浏览器出现White label Error Page 错误页面 其他客户端出现响应一个JSON格式文本包含错误码等信息 浏览器发送请求的请求头: 客户端请求头 这样就能区分来自 ...
- mysql查询一个表的字段,添加或修改到另外一个表的数据
DELIMITER $$ USE `topsale`$$ DROP PROCEDURE IF EXISTS `sale_proce`$$ CREATE DEFINER=`root`@`%` PROCE ...
- Asp.net有三大对象:HttpContext, HttpRequest, HttpResponse
一.Asp.net有三大对象:HttpContext, HttpRequest, HttpResponse.命名空间: System.Web程序集: System.Web(在 System.Web ...
- JSP基本_JSPの構成要素、アクション、ディレクティブ
1.JSPの構成要素[コア要素] JSP文法のコアとなる要素で.サーブレットソースに変換される. ・宣言: <%! - %> (宣言で指定した変数は.Javaの「フィールド変数」になる.ス ...
- Servlet基本
1.Webサーバ設定の「ディレクトリ一覧」機能 Webサーバの設定で「ディレクトリ一覧」機能を有効にすると.404 Not Found画面ではなく.ディレクトリ以下のファイルの一覧が表示されます.この ...
- How to Pronounce the Numbers 1 – 10
How to Pronounce the Numbers 1 – 10 Share Tweet Share Tagged With: Numbers Numbers are something you ...
- 趣味编程:静夜思(Kotlin版)
import java.util.* fun verticalWriting(txt:String, offset:Int) = txt.mapIndexed { i, c -> Pair(i, ...
- debian下redis2.8.17安装过程
下载redis源码包,我下载的是redis2.8.17 解压缩该源码包 tar zxf redis-2.8.17.tar.gz 进入解压缩后的目录 cd redis-2.8.17/ 添加redis用户 ...
- [CI]CodeIgniter系统流程
---------------------------------------------------------------------------------------------------- ...