用HTML5、Css3和Javascript的特殊特性来开发Web Mobile

一、Mobile 特殊的HTML1.用viewport标记使网页更加适应手机屏幕。<meta name="viewport" content="width=device-width, initial-scale=1.0"/> 2.调用手机拨电话面板
<a href="tel:18005555555">Call us at 1-800-555-5555</a>
3.调用手机短信面板
<a href="sms:18005555555"><a href="sms:18005555555,18005555556">              <！-- multiple recipients --> <a href="sms:18005555555？body=Text%20goes%20here"> //body参数貌似不起作用，也解析成电话号码了
4.设置是否关联打电话
<meta name="format-detection" content="telephone=no">
5.IOS 特殊的HTML
<！--添加到桌面主屏幕，设置icon --><link rel="apple-touch-icon" href="icon.png"/>    <！-- iOS 2.0+: 不应用icon的光泽效果 --> <link rel="apple-touch-icon-precomposed" href="icon.png"/>    <！-- iOS 4.2+ 分辨率的不同选择不同的icon --> <link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" /> <link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />    <！-- iOS 3+: 启动界面（must be 320x460） --> <link rel="apple-touch-startup-image" href="startup.png">    <！--允许使用启动界面功能，只能通过桌面主屏幕进入--> <meta name="apple-mobile-web-app-capable" content="yes" />    <！-- 控制状态栏的样式 --> <meta name="apple-mobile-web-app-status-bar-style" content="black" />
6.设置是否使用输入的自动更正、自动不全、英文自动首字母大写
<input autocorrect="off" autocomplete="off" autocapitalize="off">
二、Mobile特殊的CSS
1.Media Queries
Meida Queries可以使你根据屏幕的分标率（resolution）、方向（orientation）和尺寸（screen width）来分别实现特殊的效果。
可以有两种实现方式：1）在样式表中嵌入css。2）在link标记中使用“media”属性，来引入css文件，下面来举例说明：
只有屏幕是portrait（竖直）的时候，该css才会起作用：
@media all and （orientation: portrait） {...}
<link rel="stylesheet" media="all and （orientation: portrait）" href="portrait.css" />
下面是另外一些例子：
// target small screens （mobile devices or small desktop windows） @media only screen and （max-width: 480px） { /* CSS goes here */ }   /* high resolution screens */ @media （-webkit-min-device-pixel-ratio: 2）,               （min--moz-device-pixel-ratio: 2）,            （min-resolution: 300dpi） {   header { background-image: url（header-highres.png）; } }    /* low resolution screens */ @media （-webkit-max-device-pixel-ratio: 1.5）,               （max--moz-device-pixel-ratio: 1.5）,               （max-resolution: 299dpi） {    header { background-image: url（header-lowres.png）; } }
2.其它的CSS
-webkit-tap-highlight-color （iOS）:设置单击超链接的系统背景色。
-webkit-user-select: none;禁止用户选择文本。
-webkit-touch-callout: none;禁止弹出操作提示（当你长按一个链接，ios会在屏幕下方弹出操作提示面板）
三、特殊的Javascript1.window.scrollTo（0,0）;
2.window.matchMeida（）;
（iOS 5+） Again, just as CSS media queries aren’t specific to mobile, they do come in especially useful for mobile, so it’s worth mentioning their JavaScript counterpart. window.matchMedia（） is a JavaScript-based version of media queries. You can use as a polyfill for devices that don’t support this functionality natively.
3.navigator.connection（Android 2.2+） Determine if the phone is running on WiFi, 3G, etc. Example:if （navigator.connection.type==navigator.connection.WIFI） {    // code for WiFi connections （high-bandwidth） } 4.window.devicePixelRatio
5.window.navigator.onLine 当前的网络状态
6.window.navigator.standalone 是否是全屏幕模式
7.Touch and Guesture Event
1）.touch events（ios,Android2.2）:touchstart,touchmove,touchend,touchcancel
2）gesture events（Apple only,ios 2+）:guesturestart,guesturechange
8.Screen orientation
orientation event:portrait,landscape
9.Device orientation
10.devicemotion 用户shake或者move手机的时候触发
11.Media Capture API（Android only）
<input type="file"></input>    <！-- opens directly to the camera （Android 3.0+） --> <input type="file" accept="image/*;capture=camera"></input>    <！-- opens directly to the camera in video mode （Android 3.0+） --> <input type="file" accept="video/*;capture=camcorder"></input>    <！-- opens directly to the audio recorder （Android 3.0+） --> <input type="file" accept="audio/*;capture=microphone"></input>