如何禁止网站文本框在手机端输入文字时网页自动放大
今天折腾代码的时候突然发现手机浏览页面点击输入框页面会自动放大,然后文本框部分被遮挡了,刷新网页后网页居然无法自动还原到原来的大小,然后通过对HTML的head部分设置meta属性解决了问题。
代码如下:
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,user-scalable=no" />
mip页面写法:
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,user-scalable=no" />
知识拓展:
content属性值 :
(1)width:可视区域的宽度,值可为数字或关键词device-width;
(2)height:同width;
(3)intial-scale:页面首次被显示是可视区域的缩放级别,取值1.0则页面按实际尺寸显示,无任何缩放;
(4)maximum-scale=1.0, minimum-scale=1.0:可视区域的缩放级别,maximum-scale用户可将页面放大的程序,1.0将禁止用户放大到实际尺寸之上;
(5)user-scalable:是否可对页面进行缩放,no 禁止缩放。