利用HTML5将现有网页转成mobile版（2）
移动meta标签
移动版的webkit浏览器支持一些比较特性，能带来更好的的浏览体验。
Viewport设置
最先要设置的meta属性就是viewport。设置viewport告诉浏览器，网页内容应该怎么样去适应设备的屏幕，同时对设备的屏幕进行优化。例如：
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" >
Note: width能用px单位，如设置width=320和设置width=device-width在iphone和其它一些智能手机上的效果一样。但并不是所有手机都是这个宽度，所以最好设置device-width让浏览器自己去识别。
Android对viewport标签进行了扩展:
<meta name="viewport" content="target-densitydpi=device-dpi">
target-densitydpi的值有 device-dpi, high-dpi, medium-dpi, low-dpi.
如 果你要为网页针对不同屏幕分辨率修改，用-webkit-device-pixel-ratio这个media标签或在js中用 window.devicePixelRatio这个方法，设置target-densitydpi标签和device-dpi属性。这让你的定制更具有 灵活性。
全屏浏览
在iOS中有两个meta值，apple-mobile-web-app-capable和apple-mobile-web-app-status-bar-style，这两个会让网页内容以应用程序风格显示，并使状态栏透明。
<meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
要看这个meta的更多选项，请看 Safari reference documentation
Home 界面上的图标
iOS用rel="apple-touch-icon",android 用rel="apple-touch-icon-precomposed"。这样就能在用户把网页存为书签时，在手机HOME界面创建应用程序样式的图标。
<link rel="apple-touch-icon" href="/static/images/identity/HTML5_Badge_64.png" /><link rel="apple-touch-icon-precomposed" href="/static/images/identity/HTML5_Badge_64.png" />看看html5rocks使用的移动meta标签<head> ... <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" /> <link rel="apple-touch-icon" href="/static/images/identity/HTML5_Badge_64.png" /> <link rel="apple-touch-icon-precomposed" href="/static/images/identity/HTML5_Badge_64.png" /> ...</head>垂直布局
在小屏幕中，垂直滚动比水平滚动方便很多，保持内容单列，垂直布局对移动设备最有利。以html5rocks为例。
