在开发面向现代智能手机的移动Web应用的时候，无法避免一个事实，就是需要开发单页应用(SinglePageWebApp)。对于不同的系统需求，单页应用的粒度会不同，可能是整个系统都使用一个页面装载，也可能是按模块分为独立页面装载。在开发单页应用时第一个要处理的问题就是页面结构化，由于多个功能集中在一个页面呈现，就必然需要考虑如何实现多个视图布局？等问题。
如何实现视图之间动画切换？
页面视图
在讲页面结构化之前需要先理解视图的概念，视图是单页应用开发中最常见的模块，通常在一个单页应用中，会有多个视图存在，每一个视图都可以处理一部分业务功能，所有视图的功能集就是单页应用所能处理业务的最大能力。
单视图层
三段式结构是单视图的一种最基本布局方式
单视图并不一定都有head或foot，所以Header、Footer使用虚线来表示。多数应用中还会有导航条（Navigatior），但一般情况下导航条会被计算为Header或Content的一部分，而不会独立存在。
侧边栏
侧边栏是一种特殊的视图，在不显示时，当前视图是盖在侧边栏至上的，当它被呼出时，视图一部分滑出屏幕外，侧边栏才被显示出来，它的高度等于页面可视区域的高度。
封面图
封面图与侧边栏类似，也是一个特殊的视图。封面图一般会在页面初始时候出现，而后消失，消失之后就不再出现。它的视图层级是最高的，并且完全覆盖于其他页面元素，它的高度会大于或等于可视区域的高度。
多视图布局
单页应用中第一个要思考的问题就是：如何实现多视图的布局？通常我们会将视图的定位设置为position:absolute，这是一种简单又实用的方法。在一个时间节点上，页面可视区域只能有一个可见的当前视图，虚线表示其他视图，在页面可视区域之外不可见
此时，我们需要思考另一个问题：如何实现当前视图的Content区域内容滚动？视图的样式高度设置为height:100%，将视图高度设定为一屏高的目的是为了方便实现视图动画切换的效果（视图动画切换会在后面详细的讲）。但这样做会导致另一个问题，高度为一屏高意味着浏览器滚动条失效，无法使用浏览器滚动条滚动页面。
结束语：以上就是关于移动Web开发的页面怎么结构化的全部内容，更多内容请关注学步园。