HTML页面中input元素在android浏览器中获得焦点后页面放大解决方法

如题。

在开发微信端微店页面的过程中，页面需要使用焦点轮播图，由于开发周期短，所以直接使用之前适配在电脑端页面的焦点轮播图。这个焦点轮播图是设置了960px的宽度，为了适配页面，所以在开发的时候页面元素全部参照焦点轮播图的尺寸来进行设计。

在这个页面中，如果不使用HTML5专门为移动终端网页开发设计的viewport标签，在苹果的safari浏览器下，默认是以全屏的形式显示页面。而且点击输入框，当input元素获得焦点时，页面不会放大，但是在安卓的浏览器下，当用户点击input type=text的文本输入框，input输入框获得焦点时，页面会马上放大到最大。

使用viewport标签的话，用户通过设置initial-scale\maximum-scale\minimum-scale\user-scalable等参数来设定页面初始加载方式。但是由于我们的页面是固定的宽度，所以不同的浏览器需要作不同的viewport参数设置。即，在IOS的safari下显示正常，但是在android下是不正常的。

最后，解决方法是毅然决然地重构页面，将轮播图的宽度全部设置成了以百分比表示。同时高度以苹果手机屏幕为标准，进行比例换算。然后对页面其他元素的样式进行重构，以百分比定宽度以及margin,padding等属性。

通过viewport+百分比的方法，最终解决了页面在android移动终端中input元素获得焦点后页面放大的问题。

同样的道理，电脑端的所有页面都可以通过这个方法实现对移动端的页面适配。

附上腾讯ISUX对于移动端网页开发的一篇文章：

http://isux.tencent.com/mobile-development-essential-knowledge.html