最近，由于工作需要研究了移动平台的前端页面。
移动平台前端开发是指针对高端智能手机（如iPhone、Android）做站点适配也就是WebApp，并非是针对普通手机开发Wap 2.0。
因为这些高端智能手机（iPhone、Android）的内置浏览器都是基于webkit内核的，所以在开发WEBAPP时，多数都是使用HTML5和CSS3技术做UI布局。
本人曾尝试过2种做法：
1、页面按一般web开发的方式写，也就是说页面的宽度还是980或者960，通过使用私有meta标签实现按比例缩小为手机全屏。该方法是原有的站点上添加meta就能实现，成本低。但是，这个法子并不好，页面被整体缩小。
webkit内核中的一些私有的meta标签：
第一个meta标签表示：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；
1）width : 控制viewport的大小，可以指定一个值，如600， 或者特殊的值，如device-width为设备的宽度（单位为缩放为100%的CSS的像素）（范围从 200 到 10000 ，默认为 980 像素 ）
3）initial-scale : 初始缩放比例，页面第一次加载时的缩放比例（范围从>0到 10 ）
4）maximum-scale : 允许用户缩放到的最大比例，范围从0到10.0
5）minimum-scale : 允许用户缩放到的最小比例，范围从0到10.0
第二个meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；
第三个meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式（default，black，black-translucent）；
第四个meta标签表示：告诉设备忽略将页面中的数字识别为电话号码。
2、页面宽度设置为640（iphone手机、部分android的4寸屏的手机均是这个分辨率），再设置meta，该方法页面刚好在640的屏幕全屏。
本文只是个人的经验，如有错误，欢迎指出与交流。