最近项目做的是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点击放大的更多相关文章

  1. H5音乐自动播放ios//禁止安卓手机图片点击

    定义音乐按钮 <div id="music-btn" class="o-play" style="width: 24px; height: 24 ...

  2. html图片上传阅览并且点击放大

                  关闭   qq_31540195的博客       目录视图 摘要视图 订阅 异步赠书:9月重磅新书升级,本本经典           程序员9月书讯      每周荐书: ...

  3. input点击修改样式

    <input id="geren" type="button" value="个人奖励" style="BORDER-TOP ...

  4. layui 上传图片回显并点击放大实现

    1.页面代码布局 <div class="layui-col-xs12 form-group"> <div class="layui-col-xs6&q ...

  5. 动画--android图片点击放大动画,并遮挡旁边的控件

    http://blog.csdn.net/s13488941815/article/details/40649823: 首先是点击放大可以使用android自带的缩放动画,因为要遮盖其他控件,就需要控 ...

  6. jquery插件jquery.LightBox.js之点击放大图片并左右点击切换图片(仿相册插件)

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的点击放大图片并左右点击切换图片的效果,您可以根据自己的实 ...

  7. ios开发图片点击放大

    图片点击放大,再次点击返回原视图.完美封装,一个类一句代码即可调用.IOS完美实现 创建了一个专门用于放大图片的类,以下为.h文件 #import <Foundation/Foundation. ...

  8. angular中label包含input点击事件的问题

    问题:当点击input时,input不能勾选,单label内的其他区域点击均可控制input勾选. 分析:点击input时,$event.target.tagName   //INPUT, 点击img ...

  9. js限制图片大小、点击放大图片、点击在新开页面显示

    缩放图片到合适大小        function ResizeImages() {            var myimg, oldwidth, oldheight;            var ...

随机推荐

  1. 面试准备5之rest-framework部分

    rest-framework部分 1.你理解的Http协议? 答:1超文本协议,基于tcp协议的应用层协议,端口号80 本质就是一个socket客户端.请求-->响应-->断开 2 无连接 ...

  2. dubbo学习总结二 服务端

    服务端主要执行对底层数据库的操作 主要分层为 api +dao+ filter+ util+... 首先 dubbo 服务端有一个dubbo配置文件 dubbo:application 定义应用名称 ...

  3. SQL Server ->> SQL Server 2016新特性之 -- sp_set_session_context存储过程和SESSION_CONTEXT函数

    sp_set_session_context存储过程和SESSION_CONTEXT函数出现在了SQL Server 2016 CTP3.0上.它俩配合起来的作用是sp_set_session_con ...

  4. pt-find使用

    查找MySQL的表,并且做一些操作,基本语法就如下: pt-find [OPTIONS] [DATABASES] (1)查找一天前建立的MyISAM 引擎的表 [root@mxqmongodb2 bi ...

  5. Python初学者第一天 Python安装及第一个Python程序

    Python基础: 1day: 1.Python基础: A.编程语言介绍:     a. 计算机只能理解0和1.编程即写一段按照一定规则写代码,让计算机帮你干活:     b.机器语言:最底层的语言, ...

  6. 修改容器的hosts文件

    修改容器的hosts文件 1.介绍 docker容器中的hosts文件虽然在宿主机磁盘上/var/lib/docker/containers/xxx/hosts中,但是修改该文件是无效的,需要通过其他 ...

  7. January 29 2017 Week 5 Sunday

    In order to be irreplaceable one must always be different. 若想无可替代,必须与众不同. If all your skills or pers ...

  8. C语言编译器,写给萌新们看看。

    就我已经经历过的大学课程,仿佛每一门计算机的专业课程的开头,都是在介绍计算机发展的历史,和大名鼎鼎的冯诺依曼结构. 譬如C语言,比较水的计算机导论,c++,数据结构,计算机组成原理,甚至是Linux实 ...

  9. jq仿 妙味课堂导航01

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  10. api的使用机制:继承、实例化、实现(继承)配置、实例(参数化)配置、机制管理模块

    api的使用机制:继承.实例化.实现(继承)配置.实例(参数化)配置.机制管理模块 facade模式.管理模块