淘宝Webapp如何解决各分辨率终端适应问题？

转：http://www.zhihu.com/question/20650805

 

关于淘宝的WebApp，我没有研究过。你提到的“淘宝的webapp貌似均采用固定宽度”，我不太清楚，不做发言。不过我可以简单聊聊“采用固定宽度”解决不同分辨率的方案，因为目前我在开发的BAE WebApp项目，就是采用这种方式来处理的，这两天在准备一个BAE WebApp的PPT，聊到了一些分辨率适应的问题，不至于无的放矢。

澄清一下，这里所说的BAE WebApp，BAE是指中国移动自出研发的WebApp平台， BAE — Browser-based Application Engine，可以理解为基于HTML5的WebApp引擎，它同时具有跨平台的能力：可以运行在Android、iOS、WP系统——不是做广告，而是百度也有一个BAE，下文中出现的“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。