移动端页面适配的另类方法

做移动端的页面大多是用百分比（%）来做，每次做这种页面都相当的痛苦，特别是机型越来越多，分辨率的大小也越多，要兼容的地方比PC上复杂多了，想把页面弄的差不多，要写N多的媒体查询，这个工作量是可想而知的。

虽说移动端的精髓是：百分比（%）布局+rem控制字体大小+媒体查询（Media query）微调

但如果一下要做很多页面，所花的时间都无法预计，费时费力，兼容又不是很好。

下面提供一种方法：是利用js来控制viewport的缩放比

    if (/Android (\d+\.\d+)/.test(navigator.userAgent)) {
        var version = parseFloat(RegExp.$1);
        if(version>2.3){
            var phoneScale = parseInt(window.screen.width) / 750;
            document.write("<meta name='viewport' content='width=750, minimum-scale=" +
             phoneScale + ", maximum-scale = "+ phoneScale +
             ", target-densitydpi=device-dpi'>");
        } else {
            document.write("<meta name='viewport' content='width=750, target-densitydpi=device-dpi'>");
        }
    } else {
      document.write("<meta name='viewport' content='width=750, user-scalable=no, target-densitydpi=device-dpi'>");
    }
                    

Android下不生效问题：

注意：在Android APP里面嵌入页面，可能会出现viewport失效的情况，这个问题困扰了我好久，搞了好几天，这是个大坑啊，度娘一条一条的搜索记录翻到了十多页，甚至去翻歪果仁的提问，终于找到了解决办法，这办法一开始还不生效，就在我打算重写页面的时候，安卓那边告诉我可以了。。。

需要在安卓那边调用页面的时候，设置下webView，这个东西是什么我一两句说不清楚，自己去查资料吧。

    WebSettings settings = webView.getSettings();
    settings.setLoadWithOverviewMode(true);
    settings.setUseWideViewPort(true);
                    

参考资料：

Android Webview - Webpage should fit the device screen

IOS下不生效问题：

过了好几天，IOS那边告诉我页面放大了，我就奇怪了，viewport不是苹果最先开始弄的吗，怎么反而不支持了。我试了下相关的属性，不论我怎么加viewport，就是也不生效，想到既然安卓那边有相关的控制，IOS也应该有，然后搜索了下资料，还真有EnableViewportScale这个东西，让IOS那边看了下这个东西，然后告诉我可以了，还真是这东西搞的鬼。

代码如下：

在phonegap的config.xml中增加一行配置：

    <preference name="EnableViewportScale" value="true"/>
                    

参考资料：

解决PhoneGap不支持viewport的几种方法