淘宝Webapp如何解决各分辨率终端适应问题？-CFANZ编程社区

关于淘宝的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布局，真正做到一个应用，一套代码，随处运行。

淘宝Webapp如何解决各分辨率终端适应问题？_移动开发

上图为典型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。