移动端文本框点击后网页变大的解决办法

我们在写移动端网站时，可能会遇到在点击一个文本框想要输入内容时，整个网页都会变大，其中的字体也会变大，这就大大影响了用户的体验，也背离了我们做自适应的初衷，那么此种问题该如何解决呢？

经过我在网上各种查资料，终于找到了解决的办法，即：

将<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禁止用户缩放后就能很好的解决问题，笔者也在网络上查了很多的资料，可最终还是没有给出能令人信服的答案，如果有大神知晓，可留言告知，本人必当重谢！

 

posted @ 2015-01-12 14:43  豫见世家公子  阅读(573)  评论(0)  编辑  收藏  举报