首页 > 代码库 > 防止手机浏览点击输入框自动放大
防止手机浏览点击输入框自动放大
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) }
防止手机浏览点击输入框自动放大
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。