移动端使用meta标签解决input获取焦点放大页面
2018年03月31日 21:48:34 SPN_迪 阅读数:1712
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gala_1/article/details/79772677
在移动端使用的meta标签里,最常用,最重要的一个:
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
这里面各项的含义:
width=device-width ,使你的页面的宽度width,等于移动设配的宽度;
minimum-scale=1.0 ,maximum-scale=1.0 ,这两个意思是最小和最大的缩放比是1;
user-scalable=no ,最重要的这个代表用户是否可以对页面进行缩放,yes为可以,no为不可以。一般我们将值都设为no,如果允许用户缩放,页面的展示效果并不好。
使用这个meat标签可以让input在一般浏览器上不会放大页面。
在使用meat标签的同时,我一般配合js和css一起用:
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)
-
}
根据查到的说法为这是为了在meat标签失效时,通过js监听touch事件,阻止缩放。
css代码为(没有验证):
input,input:focus,input:active{user-select: text;-webkit-user-select:text;zoom:1}
css的作用是否起作用没有验证。