二十五、HTML5单页框架View.js介绍 - 视图布局
作为用户视觉的页面载体，每个视图都可能拥有自己独特的布局。
下图是移动端常见的布局结构：
其中，顶部标题栏和底部导航栏，以及可能存在的标签页栏，通常情况下是需要固定位置显示的。开发者一般采用绝对定位的方式将其固定。但在页面涉及用户输入的场景下，为避免弹出的虚拟键盘将底部导航 “顶上去” 的情况等，View.js 建议开发者使用脚本动态布局来实现位置固定的目的，亦即：
[可滚动正文] 的高度 = 布局空间的总高度 - [标题]的高度 - [底部导航] 的高度
其中，布局空间的高度基本上等同于浏览器正文区域的高度。
为简化开发者的开发工作，View.js按如下方式供开发者实现动态布局：
- 开发者提供特定布局空间宽度和高度下的布局动作；
- View.js自动检测布局环境的变化，做出是否需要重新布局的决定，并自动计算出布局空间的宽度和高度；
- View.js使用计算得出的布局空间的宽度和高度调用开发者提供的布局动作，实现动态布局的目的
上述动作会在视图的每次进入前（enter事件触发前）执行。如果视图是第一次进入，则在ready事件触发前执行。
开发者可以通过API：
view.setLayoutAction({Function} action, {Boolean} [ifLayoutWhenLayoutChanges=true])
设定布局动作。如：
var viewId = "myView";
var view = View.ofId(viewId);
var headerObj = view.find("header");
var bodyObj = view.find(".body"),
btnObj = view.find(".btn");
view.setLayoutAction(function(){
var totalHeight = View.layout.getLayoutHeight();
var height = totalHeight - headerObj.offsetHeight - btnObj.offsetHeight;
bodyObj.style.height = height + "px";
});
在布局功能的设计上，View.js假定不同分辨率下所需要执行的布局动作是不同的。
View.js支持分别为：
- 移动设备的竖屏模式
- 移动设备的横屏模式
- 平板设备的竖屏模式
- 平板设备的横屏模式
- PC设备的竖屏模式
- PC设备的横屏模式
几种场景执行不同的布局动作。开发者只需为不同场景提供不同的布局动作即可，View.js自动完成设备类型及设备方向的识别并调用对应的布局动作。
默认情况下，View.js假定移动设备的竖屏模式、移动设备的横屏模式、平板设备的竖屏模式和平板设备的横屏模式表现一致，均为：
宽度渲染为浏览器宽度，高度自动
当在PC上浏览时，View.js默认将页面以iPhone5的320 * 568分辨率渲染。亦即，PC横屏浏览时，根据浏览器高度动态计算可用高度，并根据iPhone5的分辨率计算宽度，然后将界面水平居中呈现；PC纵屏浏览时，将其以移动设备的竖屏模式对待。效果如下图所示：
开发者可以通过在html节点上声明 data-view-whr 属性以设定期望的视图宽高比。例如：
<html data-view-whr = "375/568">
...
</html>
效果如下所示：