用HTML5、Css3和Javascript的特殊特性来开发Web Mobile
一、Mobile 特殊的HTML
1.用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会在屏幕下方弹出操作提示面板）
三、特殊的Javascript
1.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>