防止手机浏览点击输入框自动放大

1、设置meta属性

<meta content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width" name="viewport">

content属性值 :

  width:可视区域的宽度,值可为数字或关键词device-width;

  height:同width;

  intial-scale:页面首次被显示是可视区域的缩放级别,取值1.0则页面按实际尺寸显示,无任何缩放;

  maximum-scale=1.0, minimum-scale=1.0:可视区域的缩放级别,maximum-scale用户可将页面放大的程序,1.0将禁止用户放大到实际尺寸之上;

  user-scalable:是否可对页面进行缩放,no 禁止缩放。

2、苹果为了提高Safari中网站的辅助功能,屏蔽了Meta下的user-scalable=no功能。所以在iOS10下面,就算加上user-scalable=no,Safari浏览器也能支持手动缩放。所以只能用js加监听事件来阻止手动缩放。

window.onload=function () {
        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)
    } 
时间: 2024-10-11 22:09:20

防止手机浏览点击输入框自动放大的相关文章

为什么手机网页点击输入框的瞬间会出现灰色背景呢?怎么去掉灰色背景?

苹果手机打开的时候点击的瞬间(input标签)出现灰色背景,其他手机好像不会出现灰色背景?求解答,谢谢! 自己找到满意答案了:-webkit-tap-highlight-color:rgba(0,0,0,0);//透明度设置为0,去掉点击链接和文本框对象时默认的灰色半透明覆盖层(iOS)或者虚框(Android) input:focus{border:none;background:none;}写了,没用撒而且只是点击的瞬间出现灰色背景,获取焦点后还是白色的

UIEditBox 控件的使用 点击输入框 自动切换 到下一个输入框 并上移 背景

Quick-3.5 local editAccount,editPwd local function editBoxEventHandler(strEventName,pSender) local edit = pSender:getName() if strEventName == "return" then if edit == "editAccount" then local _delay = function () if not tolua.isnull(e

IPhone手机页面中点击文本输入框,弹出键盘,网页会放大,如何解决

在head标签中加入以上meta声明.具体属性可以谷歌/百度. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 我查了下viewport,有几个属性:width - viewport的宽度 height - viewport的高度initial-scale - 初始的缩放比例minim

vivo手机的坑-禁止微信浏览器网页点击图片,图片会自动放大

这个坑让我郁闷极了,之前我的手机在微信浏览器打开网页点击图片时,啥事也没有 现在,咋回事,变了呢! 现在我打开微信浏览器网页面html,点击一个img标签的图片,图片会自动满屏放大,吓死宝宝了.其他人的手机就咋没有这个问题呢,我的pie手机 这种事情的发生有时候是让我高兴的,但是有时候是悲伤的(若是我需要给一个按钮添加点击事件且按钮里存在img标签时,太TMD悲伤了): 现在终于解决了这种事情的发生!!!! 移动端禁止图片长按和vivo手机点击img标签放大图片,禁止长按识别二维码或保存图片 i

怎么让手机浏览器和微信焦点在文本输入框时不自动放大页面

方法一:禁止页面缩放 在head标签中加入以下代码 <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0, user-scalable=no"> content的解释 width=device-width //宽度等于设备屏幕宽度 initial-scale=1.0 //初始缩放比例 minimum-

解决手机浏览器上input 输入框导致页面放大的问题(记录)

在微信手机页面开发当中,页面是没有问题的,但是当焦点在input输入框的时候,手机页面会自动放大. 加入以下代码在head 区,可解决此问题 <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />

Android点击列表后弹出输入框,所点击项自动滚动到输入框上方(类似微信的评论)

Android点击列表后弹出输入框,所点击项自动滚动到输入框上方 使用微信的朋友圈会发现,点击某一条评论后输入框会弹出来,然后所点击的那一项会自动地滚动到输入框上方的位置,这样如果开始所点击的评论在屏幕很下方的话,就不会被输入框遮住,虽然微信这一点在我的MX2频繁点几次后滚动的位置就完全错误了,但据说在有些机型上效果还不错,还有其他地方可能会有类似的需求,比如登录时软键盘可能会把登录按钮遮住. 要实现这个功能需要注意的地方主要有两点: 什么时候进行滚动操作,以及有可能还需要在输入框消失时回滚回去

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

定义音乐按钮 <div id="music-btn" class="o-play" style="width: 24px; height: 24px; display: block; position: absolute; top: 12px; right: 12px; z-index: 9999; background: url(images/musicbtn.png) no-repeat center/cover;"></d

借助IIS管理器--用手机浏览HTML页面

平时在电脑上写的HTML页面如果没有上线的话,想在手机上浏览效果是很难的,在实际工作中我们却非常希望能够用手机去测试HTML页面,毕竟很多的bug在PC端测不出来 首先,关于IIS管理器的安装,我们可以通过万能的百度来实现(我也不是特别懂这块):http://jingyan.baidu.com/article/19192ad853224ce53f570748.html 1.安装好以后,我们打开IIS管理器,找到"网站",鼠标点击右键,选择"添加网站".在网站名称里面