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

文章由LinuxBoy分享于2019-04-01 12:04:24热评（565）

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

一、Mobile 特殊的HTML

1.用viewport标记使网页更加适应手机屏幕。

2.调用手机拨电话面板

3.调用手机短信面板

<a href="sms:18005555555?body=Text%20goes%20here"> //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会在屏幕下方弹出操作提示面板）

三、特殊的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）

推荐文章：

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