最近，由于工作需要研究了移动平台的前端页面。

移动平台前端开发是指针对高端智能手机（如iPhone、Android）做站点适配也就是WebApp，并非是针对普通手机开发Wap 2.0。

因为这些高端智能手机（iPhone、Android）的内置浏览器都是基于webkit内核的，所以在开发WEBAPP时，多数都是使用HTML5和CSS3技术做UI布局。

本人曾尝试过2种做法：

1、页面按一般web开发的方式写，也就是说页面的宽度还是980或者960，通过使用私有meta标签实现按比例缩小为手机全屏。该方法是原有的站点上添加meta就能实现，成本低。但是，这个法子并不好，页面被整体缩小。

webkit内核中的一些私有的meta标签：

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;"name="viewport"/>
<meta content="yes"name="apple-mobile-web-app-capable"/>
<meta content="black" name="apple-mobile-web-app-status-bar-style"/>
<meta content=”default” name=”apple-mobile-web-app-status-bar-style” />
<meta content=”black-translucent” name=”apple-mobile-web-app-status-bar-style” />
<meta content="telephone=no"name="format-detection"/>

第一个meta标签表示：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；

1）width : 控制viewport的大小，可以指定一个值，如600， 或者特殊的值，如device-width为设备的宽度（单位为缩放为100%的CSS的像素）（范围从 200 到 10,000 ，默认为 980 像素 ）

2）height : 和width相对应，指定高度（范围从 223 到 10,000 ）

3）initial-scale : 初始缩放比例，页面第一次加载时的缩放比例（范围从>0到 10 ）

4）maximum-scale : 允许用户缩放到的最大比例，范围从0到10.0

5）minimum-scale : 允许用户缩放到的最小比例，范围从0到10.0

6）user-scalable : 用户是否可以手动缩放，值可以是：①yes、 true允许用户缩放；②no、false不允许用户缩放

第二个meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；

第三个meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式（default，black，black-translucent）；

第四个meta标签表示：告诉设备忽略将页面中的数字识别为电话号码。

2、页面宽度设置为640（iphone手机、部分android的4寸屏的手机均是这个分辨率），再设置meta，该方法页面刚好在640的屏幕全屏。

<meta name="viewport" content="target-densitydpi=320,width=640,user-scalable=no">

本文只是个人的经验，如有错误，欢迎指出与交流。