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 ...
随机推荐
- List去重问题引出来的hashCode和equals方法
一.List 里面是基本类型的去重问题 import java.util.ArrayList; import java.util.HashSet; import java.util.List; imp ...
- shell编程小技巧(命令篇)
本文主要介绍shell编程中一些好用的命令或者一些常见命令但比较少用却又好用的参数,目的是希望可以提高编码效率. df命令 常用命令 df / df -k / df -m / df -H / df - ...
- 使用__all__限制模块可被导入对象
经常我们会编写自定义模块,用于被别的脚本调用;有时候为了方便,会使用from module_name import *的方式导入,这样会把模块中全部对象导入进来; 使用__all__结合列表,可以控制 ...
- ArcGIS自定义工具箱-判断字段值是否相等
ArcGIS自定义工具箱-判断字段值是否相等 联系方式:谢老师,135-4855-4328,xiexiaokui#qq.com 目的:判断两个字段值是否相等 使用方法: 结果: 联系方式:谢老师,13 ...
- 在使用 #import <objc/message.h>时 xcode 报 :Too many arguments to function call, expected 0 , have * 解决方法
选中项目 - Project - Build Settings -
- python import sklearn出错 "ImportError: DLL load failed: 找不到指定的模块。
安装好sklearn模块后,import的时候出现了以下错误: 但是确实已经装好了,百思不得其解,网上查找之后发现,出现错误原因:安装包的来源问题,也可以理解为包版本兼容问题,有的包使用官方出版,有的 ...
- whatweb工具
WhatWeb WhatWeb可以用来确定服务器使用的CMS.博客平台.统计分析软件包.JavaScript库等.这个工具有超过900个插件用来扫描目标. 使用方法: root@root:/pente ...
- flume 实际的使用
1.No configuration found for this host:seqGenSrc bin/flume-ng agent --conf conf --conf-file conf/flu ...
- centos mongodb
cd到mongodb目录下的bin文件夹,执行命令./mongo 运行如下: [root@namenode mongodb]# ./bin/mongo MongoDB shell version: 1 ...
- Rx操作符
[Rx操作符] 1.Observable.from()方法,它接收一个集合作为输入,然后每次输出一个元素给subscriber: Observable.from("url1", & ...