移动端ios 点击input 放大出现遮罩层

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

ios上不起效,只能通过设置input的字体来阻止,ios 认为小于16px 的字体太小,只有放大用户才能看清,所以我们只能更改 input 字体大小

input:focus {

  font-size: 16px !important;

}

-webkit-tap-highlight-color:transparent;

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

但是据说ISO10的屏蔽了user-scalable=no,所以网上找了另一段据说可以监控js来达到目的的代码。

//设定苹果手机input框不自动放大监听

document.addEventListener('touchstart',function(event){

if(event.touches.length>1){

            event.preventDefault();

        }

    });

varlastTouchEnd=0;

document.addEventListener('touchend',function(event){

varnow=(newDate()).getTime();

if(now-lastTouchEnd<=300){

            event.preventDefault();

        }

        lastTouchEnd=now;

},false);

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

友情链接更多精彩内容