做Phonegap项目一段时间了,从最开始的迷惑到现在渐入佳境,有不少值得总结的地方.
特在此记录下来,以便于来者之可追.
布局重点No.1 浏览器是你的辅助布局调试工具,但远不是你布局的终点.
在开发移动app时,你要时刻记住,app的最终目标不是pc浏览器而是移动设备. 无论别人告诉你,浏览器如何如何能模拟出设备的尺寸,请记住设备里的测试才是值得信赖的.
也许会相对麻烦,但是尽量多的使用移动设备测试布局结果. 跟敏捷开发的思想一致,设备展现给你测试结果的频率越高,你能开发出越真实的app,也更接近于最终需求.
布局重点No.2 viewport
<meta name="viewport" content="height=device-height,width=device-width,initial-scale=1.0,maximum-scale=1.0" />
这或许是你在学习大多数的phonegap项目源码,都会最先看到的一个段子了.
布局重点No.3 响应式布局vs流式布局+百分比
Responsible design. 这个是我身旁的一位经验丰富的同事在面对当前网站需要在各种设备上显示的现状经常提到的一个名词.
的确,在css3大行其道的今天,一个简单的@media让网站使用最适合于该设备的样式表.
但是本人却相对来说比较倾向于后者.
原因很简单:前者的成本相对较高. 要实现一个比较好的响应式布局,意味着你有充足的标准的设备来进行测试,充足的勇气面对固定尺寸可能带给你的使布局变形的可能性.
如果你经常使用移动设备,你会发现两个细节:(1)app往往使用左右滑动来实现分页(2)一个界面显示较多内容时,app会使用上下滑动来显示多出的内容. 前面说的细节让流式布局在移动设备中如鱼得水. 试想, 当屏幕足够宽的时候,app的显示内容横向布局以让界面显示更多内容;当屏幕变为宽度较窄的设备(如小屏幕手机)时,内容就滑动到下方--这不就是咱们在css进行布局时经常用到的float的效果么?
布局重点No.4 字体及尺寸尽量使用em或者百分比
在最近的一个phonegap项目中,我开始一段时间被"像素"折磨得死去活来.当客户发来一个psd,按照上面的固定像素习惯性的进行切图,布局,并在pc的浏览器中反复测试并确认与客户的需求无异时,我并没有意识到,这种设计在移动开发中简直是噩梦的开始. 固定的像素布局及字体完全无法适应不同屏幕尺寸的设备,这让app看上去简直一塌糊涂.
但是当你在使用em+百分比+流式布局来解决这些问题时,一切都迎刃而解.
布局重点No.5 图片显示使用img标签,并固定高度
当显示图片时,你或许会面对两种选择:(1)使用img标签(2)使用图片作为background-image. 在移动设备中,虽然是否使用img标签不涉及seo方面的考虑,但是无疑也是较好的选择.在使用background显示图片时,图片无法自动计算比例,而是只能按照容器的尺寸计算百分比显示或者指定一个固定像素尺寸显示,正如你所想,这种显示必定会使图片出现失真的情况,显示效果欠佳.
显示图片的另一个技巧是使用固定高度,而不使用固定宽度. 当采取这种方法设置图片时,图片能较好的按照比例伸缩,显示出原有的效果.
未完待续...