BAE WebApp开发 [1]——解决各分辨率终端适应问题

本篇源自知乎上我对一个关于WebApp自适应的问题的回答，转到这里，作为《BAE WebApp开发系列》中一篇关于解决各分辨率终端适应问题的介绍。

这里所说的BAE WebApp，BAE是指中国移动自出研发的WebApp平台， BAE — Browser-based Application Engine，可以理解为基于HTML5的WebApp引擎，它同时具有跨平台的能力：可以运行在Android、iOS、WP系统，下文中出现的“WebApp”均指运行在BAE平台上的WebApp。

WebApp在布局开发时采用固定宽度和高度的做法，目前的标准是基于480*800分辨率，去除Android Title Bar后，实际运行WebApp的可视区域尺寸为480*762。即所有的WebApp开发时均按照480*762的尺寸来布局。在WebApp运行当中，由BAE将应用整体放大到目标屏幕的宽度，WebApp调用JS方法调整自身布局框架的高度，动态完成不同分辨率创下的WebApp布局的自适应。

这样做的好处是显而易见的：不必开发多套UI布局，避免CSS百分百布局方式带来的诸多问题；WebApp开发者不需考虑布局适应的问题，只需像做普通网页一样，为WebApp开发一套UI布局，真正做到一个应用，一套代码，随处运行。


上图为典型3段式WebApp布局结构，分别为Header、Container、Footer。
WebApp布局时以480*800分辨率为基准，去除Android Title Bar后的实际尺寸为480px * 762px。

HTML代码如下：

<div class="app-background-adapt">
    <div class="ui-header"></div>
    <div class="ui-container"></div>
    <div class="ui-footer"></div>
</div>

CSS代码如下：

/* 绝对定位布局，支持Android2.2及以上 */

.app-background-adapt {
    position : relative; 
    width  : 480px; 
    overflow : hidden
}

.ui-header, .ui-container, .ui-footer {
    position : absolute; 
    z-index : 10;
    left : 0
} 

.ui-header { 
    top : 0;
    height : 80px 
}
.ui-footer  { 
    bottom : 0; 
    height : 80px 
}

/* Container height : 762px - 80px - 80px */
.ui-container  { 
    top : 80px /* height : 602px */ 
}

 

BAE WebApp布局自适应分辨率的两个步骤：
一、BAE平台适配宽度变化：
       BAE将采用480*762基准尺寸的应用整体放大，将基准宽度放大到目标屏幕尺寸的宽度，完成横向的适应。

二、WebApp应用适配高度变化：
1.将WebApp布局架构的样式定义为模板

<script id='t-appLayoutAdaptive' type='text/style'>
    .app-background-adapt { 
        height : [[datumHeight]]px; 
    }
    .ui-container { 
        height : [[Container ]]px; 
    }
</script>

2.调用布局方法

 

common.appLayoutAdaptive.call('t-appLayoutAdaptive', {
    Container : 602
});

 

3.common.appLayoutAdaptive对象

 

//根据屏幕尺寸设定应用的高宽,自适应应用的高度,与应用居中
common.appLayoutAdaptive = {
    datumWidth: 480,
    //基准宽度,即屏幕宽度
    datumHeight: 762,
    //基准高度,即除去title bar外的屏幕高度
    datumScale: 1,
    //基准缩放比率
    /*参数说明：
     * templateId 样式模版id
     * defaultStyle 初始布局主要DIV层高度设定
    */
    call: function(templateId, defaultStyle) {
        this.handler(templateId, defaultStyle, this.getViewableArea());
    },

    /*获取应用缩放相关参数*/
    getViewableArea: function() {
        var isMobile = common.support.isMobile,
        //获取显示应用区域的宽度和高度，单位为像素。
        viewableAreaWidth = isMobile ? Widget.getDisplayAreaWidth() : this.datumWidth,
        viewableAreaHeight = isMobile ? Widget.getDisplayAreaHeight() : this.datumHeight,
        //获取当前应用的缩放比例
        viewableAreaScale = isMobile ? Widget.getDisplayScale() : this.datumScale;

        return {
            width: viewableAreaWidth,
            height: viewableAreaHeight,
            scale: viewableAreaScale
        };
    },

    /* 处理应用高度适配,获取目标屏幕宽度和高度，将目标宽度缩放到基准宽度480px,获取缩放后的高度,跟基准高度762px比较得出差值,获取框架DIV需拉伸的值 */
    handler: function(templateId, defaultStyle, viewableArea) {
        defaultStyle.datumHeight = this.datumHeight;

        /* 计算屏幕缩放后比设定高度的差值
         * 当目标尺寸大于等于480px时,将目标屏幕缩小到480px宽度;
         * 反之,将目标屏幕放大到480px;
         * 得到缩放后的目标屏幕的高度,减去762px
        */
        viewableArea.scale = viewableArea.height / viewableArea.scale - this.datumHeight;

        for (var key in defaultStyle) {
            defaultStyle[key] = defaultStyle[key] + viewableArea.scale;
        }

        //生成style
        var style = template.render(templateId, defaultStyle);

        try {
            var styleNode = document.createElement('style');
            styleNode.type = 'text/css';
            styleNode.innerHTML = style;

            document.body.appendChild(styleNode);
        } catch(e) {
            //OPhone(Android 2.1)不支持修改style块，亦不支持创建style块
        }
    }
};

 

common.appLayoutAdaptive对象的作用就是：处理应用高度适配,获取目标屏幕宽度和高度，将目标宽度缩放到基准宽度480px,获取缩放后的高度,跟基准高度762px比较得出差值,获取框架DIV需拉伸的值。然后通过CSS模版，调整框架DIV的高度，生成Style。