转: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。
相关推荐
CSDN_针对移动终端的WEBAPP开发_ChaiChunyan
C# Webapp C# WebappC# WebappC# WebappC# WebappC# WebappC# Webapp
另外,clouda app可以同时开发服务端和客户端,客户端的数据与云端实时同步,其内部数据也可供搜索引擎检索,解决app孤岛以及99.9%长尾应用只有30%分发量 的搜索分发问题。 标签:Clouda
1.了解Web工程概念及与传统软件工程的区别 2.理解WebApp的概念、特点和开发过程 3.掌握WebApp的分析、设计和测试方法 4.掌握WebApp综合开发方法及课程设计过程
webapp 页面交互与布局webapp 页面交互与布局webapp 页面交互与布局webapp 页面交互与布局
公司做好一个H5的网页版网站,想直接打包成ios 和andrioid的App应用,方法很简单步骤详见我的另一篇博文(http://blog.csdn.net/lxy1106/article/details/79420176),此处为第2步的Hbuilder的解决方案,只需要将该...
webapp设计尺寸规范,好的规范,铸就明天的你
赠送jar包:jetty-webapp-9.3.19.v20170502.jar; 赠送原API文档:jetty-webapp-9.3.19.v20170502-javadoc.jar; 赠送源代码:jetty-webapp-9.3.19.v20170502-sources.jar; 赠送Maven依赖信息文件:jetty-webapp-...
webapp之设计尺寸转css-rem尺寸,从而适配所有移动端分辨率
Qt使用QtWebApp搭建Http服务器实现文件下载
通过组件方式开发webApp 整个项目的源码
10个主流webapp小程序项目,是个非常好的资源,包括主流的:教育,电商,快递,外卖等;10个主流webapp小程序项目,是个非常好的资源,包括主流的:教育,电商,快递,外卖等;10个主流webapp小程序项目,是个非常好的...
智能家居控制器软件(WebApp版本)V2.0-操作手册讲述.docx智能家居控制器软件(WebApp版本)V2.0-操作手册讲述.docx智能家居控制器软件(WebApp版本)V2.0-操作手册讲述.docx智能家居控制器软件(WebApp版本)V2.0-操作手册...
官方离线安装包,测试可用。使用rpm -ivh [rpm完整包名] 进行安装
CAS(Central Authentication Service) 是 Yale 大学发起的一个开源项目,据统计,大概每 10 个采用开源构建 Web SSO 的 Java 项目,就有 8 个使用 CAS 。
咔咔出行——解决出行问题基于高德地图API,Vue,Express实现的移动端全栈webapp
webkit webApp 开发技术要点总结.欢迎下载学习
nexus-webapp-1.9.2.4安装文件
主要用于webapp开发代码编辑,主要用于手机网页版转换成webapp
项目名称 camunda BPM - webapp - webjar 项目主页 隶属组织 开源协议 仓库 Central 类库 camunda BPM - webapp - webjar 标签 javabpmnworkflowdmnbpmprocess-enginecamunda-bpm-platformcamunda-enginecmmn