Home / Blog / mobile

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

Author: Vic.Wang 2015/08/31 Tags:mobileadaptive移动端适配

做移动端的页面大多是用百分比(%)来做,每次做这种页面都相当的痛苦,特别是机型越来越多,分辨率的大小也越多,要兼容的地方比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的几种方法