h5禁用手机input点击放大
最近项目做的是h5的手机移动端,在用苹果浏览器测试时,弹出框输入信息会自动拉伸屏幕,并且不会像安卓一样回来。
网上查找说设置浏览器自适应头,但是并没有效果,
<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
后来看到一篇禁用事件,于是我尝试了一下解决了问题,在此记录一下。
由于用的vue.js,可以在idnex.html界面禁掉缩放事件,
<script>
window.onload = function () {
document.addEventListener('gesturestart', function (e) {
e.preventDefault();
});
document.addEventListener('dblclick', function (e) {
e.preventDefault();
});
document.addEventListener('touchstart', function (event) {
if (event.touches.length > 1) {
event.preventDefault();
}
});
var lastTouchEnd = 0;
document.addEventListener('touchend', function (event) {
var now = (new Date()).getTime();
if (now - lastTouchEnd <= 300) {
event.preventDefault();
}
lastTouchEnd = now;
}, false);
};
</script>
h5禁用手机input点击放大的更多相关文章
- H5音乐自动播放ios//禁止安卓手机图片点击
定义音乐按钮 <div id="music-btn" class="o-play" style="width: 24px; height: 24 ...
- html图片上传阅览并且点击放大
关闭 qq_31540195的博客 目录视图 摘要视图 订阅 异步赠书:9月重磅新书升级,本本经典 程序员9月书讯 每周荐书: ...
- input点击修改样式
<input id="geren" type="button" value="个人奖励" style="BORDER-TOP ...
- layui 上传图片回显并点击放大实现
1.页面代码布局 <div class="layui-col-xs12 form-group"> <div class="layui-col-xs6&q ...
- 动画--android图片点击放大动画,并遮挡旁边的控件
http://blog.csdn.net/s13488941815/article/details/40649823: 首先是点击放大可以使用android自带的缩放动画,因为要遮盖其他控件,就需要控 ...
- jquery插件jquery.LightBox.js之点击放大图片并左右点击切换图片(仿相册插件)
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的点击放大图片并左右点击切换图片的效果,您可以根据自己的实 ...
- ios开发图片点击放大
图片点击放大,再次点击返回原视图.完美封装,一个类一句代码即可调用.IOS完美实现 创建了一个专门用于放大图片的类,以下为.h文件 #import <Foundation/Foundation. ...
- angular中label包含input点击事件的问题
问题:当点击input时,input不能勾选,单label内的其他区域点击均可控制input勾选. 分析:点击input时,$event.target.tagName //INPUT, 点击img ...
- js限制图片大小、点击放大图片、点击在新开页面显示
缩放图片到合适大小 function ResizeImages() { var myimg, oldwidth, oldheight; var ...
随机推荐
- 落地生根两周年,微软Azure进入2.0时代
By: 申元庆 微软亚太科技有限公司董事长 微软亚太研发集团首席运营官 微软中国云计算与企业总经理 仿佛就在转眼间,微软Azure已经在中国落地生根两年了. 长风破浪会有时,直挂云帆济沧海.微软云技术 ...
- webpack之react开发前准备
今天抽出空来,翻了翻webpack之react的书籍,看到刚出的es6语法,貌似是简单了不少,但是兼容性确实不容乐观,如果实在要用那也不是不可以的,首先就跟随我来看下这个插件吧: Babel:这个插件 ...
- 021logging模块
##importlogging logging.debug('debug message')logging.info('info message')logging.warning('warning ...
- 管理kafka
一.主题操作使用kafka-topics.sh工具可以执行主题的大部分操作(配置变更部分已被启用并被移动到kafka-configs.sh工具中).我们可以用它创建.修改.删除和查看集群里的主题,要使 ...
- Django应用的打包和应用的安装和卸载
将应用打包需要安装: setuptools 安装和卸载应用需要安装: pip 举例polls是一个应用包. polls文件夹中包含所有有关应用的文件. 打包应用: 首先,在你的Django项目之外,为 ...
- UIView 动画 依赖与 CALayer的证据
- (nullable id<CAAction>)actionForLayer:(CALayer *)layer forKey:(NSString *)event Layer: -(voi ...
- GPU 与CPU的作用协调,工作流程、GPU整合到CPU得好处
http://blog.csdn.net/maopig/article/details/6803141 在不少人的心目中,显卡最大的用途可能就只有两点——玩游戏.看电影,除此之外,GPU并没有其他的作 ...
- vector erase
vector::erase 从指定容器删除指定的元素 两个重载: iterator erase (iterator position);删除指定位置position的元素,并返回删除元素的下一个元素的 ...
- 关于PHP中的 serialize () 和 unserialize () 的使用(即关于PHP中的值与已存储的表示的相互转换)
有时,我们会碰到这样的数据(字符串) a:3:{i:0;s:44:"/Uploads/images/2017-07-21/5971a9a08ad57.png";i:1;s:44:& ...
- linq 和lamba表达式
一.什么是Linq(what)二.Linq的优点(why)三.Linq查询的步骤(how)四.查询基本操作五.結合實例代碼(具體聯繫用linqtosql來寫的增刪改查)一.什么是Linq(what). ...