歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
您现在的位置: Linux教程網 >> UnixLinux >  >> Linux編程 >> Linux編程

用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>

Copyright © Linux教程網 All Rights Reserved