基于GMU开发单页应用

最近做的项目，H5单页应用，嵌入第三方IOS和Android客户端。
时间紧迫，开发时间一周，无暇筛选框架，大概对比了jQuery Mobile、Bootstrap、Amaze UI、AngularJS、Zepto等。经过对比项目环境，最终决定基于百度的GMU框架，创建单页应用。

吐槽一下，GMU似乎很久没有更新了。官网最新版本是2.1.1，更新时间2013.10.24。github最后一次更新是3个月前，但非重要更新。选中它的原因，只是看重百度的用户群体设备花样百出，性能参差不齐，其兼容性相对较好。

第一次开发H5单页应用，过程中遇到几个问题，特此记录一下。
1.设计稿局限于单一平台。
视觉设计师，根本没有考虑多种设备和分辨率下的显示效果。设计的很多交互效果，在实现时非常麻烦，花费了大量时间调整兼容性。
2.字体大小在不同设备上显示有差异。
参考GMU的demo，使用百分比来控制font-size。在PC端chrome中模拟，没任何问题。但放入H5容器（如微信）后，字体大小与PC端chrome中相差甚远。最终还是通过像素数来指定字体大小。
3.GMU的Toolbar太“智能”。
Toolbar会自动对指定的DOM内容进行包装，以<h>标签作为标题，<h>之前的DOM包装进左侧菜单，<h>之后的DOM包装进右侧菜单。挺人性化吧，但问题在于它没有提供禁用功能。原本希望使用此方式，将按钮区域固定至屏幕最下方，现在只能作罢。
4.H5容器中渲染顺序错误。
使用iScroll处理单页，根据其只滚动页内第一个子元素的原理，将按钮区域作为页内第二个子元素，通过position:absolute;将按钮区域固定在屏幕最下方。
很奇怪的是，如果进入应用后直接显示该页，按钮区域位置正常。如果进入应用后通过切换显示该页，按钮区域会被页内第一个子元素的内容覆盖。其表现类似于被设置了z-index属性，safari完全重现，chrome偶尔重现。
更奇怪的是，如果将屏幕方向切换一下一切又正常了，怀疑是切换方向导致页面重新渲染。
尝试多种方式解决，均告失败。最终使用stackoverflow中提供的方案解决。