一、Mobile 特殊的HTML
1.用viewport标记使网页更加适应手机屏幕。
2.调用手机拨电话面板
Call us at 1-800-555-5555
3.调用手机短信面板
//body参数貌似不起作用,也解析成电话号码了
4.设置是否关联打电话
5.IOS 特殊的HTML
6.设置是否使用输入的自动更正、自动不全、英文自动首字母大写
二、Mobile特殊的CSS
1.Media Queries
Meida Queries可以使你根据屏幕的分标率(resolution)、方向(orientation)和尺寸(screen width)来分别实现特殊的效果。
可以有两种实现方式:1)在样式表中嵌入css。2)在link标记中使用“media”属性,来引入css文件,下面来举例说明:
只有屏幕是portrait(竖直)的时候,该css才会起作用:
@media all and (orientation: portrait) {...}
下面是另外一些例子:
// 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会在屏幕下方弹出操作提示面板)
三、特殊的java script
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 java script counterpart. window.matchMedia() is a java script-based version of media queries. You can use as a polyfill for devices that don’t support this functionality natively.
3.navigator.connection
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)