我们在写移动端网站时,可能会遇到在点击一个文本框想要输入内容时,整个网页都会变大,其中的字体也会变大,这就大大影响了用户的体验,也背离了我们做自适应的初衷,那么此种问题该如何解决呢?
经过我在网上各种查资料,终于找到了解决的办法,即:
将<meta name="viewport" content="width=device-width, initial-scale=1">
改成:<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">即可。
在网页的<head>中增加以上这句话,可以让网页的宽度自动适应移动端屏幕的宽度。
其中:
width=device-width :表示宽度是设备屏幕的宽度
initial-scale=1.0:表示初始的缩放比例
user-scalable=no:表示禁止用户调整缩放比例
关于自适应的其他的一些设置及语义,大家可自行查询,在此不再赘述。
至于为什么加了user-scalable=no禁止用户缩放后就能很好的解决问题,笔者也在网络上查了很多的资料,可最终还是没有给出能令人信服的答案,如果有大神知晓,可留言告知,本人必当重谢!