Develop Web mobile with the special features of HTML5, css3, and JavaScript

I. Mobile Special html

1. Use the viewport tag to make the webpage more adaptable to the mobile phone screen.

<Meta name = "viewport" content = "width = device-width, initial-size = 1.0"/>

2. Call the phone dial panel

<A href = "Tel: 18005555555"> call us at 1-800-555-5555 </a>

3. Call the SMS panel

<A href = "SMS: 18005555555">

<A href = "SMS: 18005555555, 18005555556"> <! -- Multiple recipients -->

<A href = "SMS: 18005555555? Body = text % 20 goes % 20 here "> // The Body parameter does not seem to work and is resolved to a phone number.

4. Set whether to associate a call.

<Meta name = "format-detection" content = "telephone = No">

5. iOS special html

<! -- Add to the desktop home screen and set the icon -->

<LINK rel = "apple-touch-icon" href = "icon.png"/>

<! -- IOS 2.0 +: do not apply the glossy Effect of icons -->

<LINK rel = "apple-touch-icon-precomposed" href = "icon.png"/>

<! -- For iOS 4.2 +, select different icons for different resolutions -->

<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 +: startup interface (must be 320x460) -->

<LINK rel = "apple-touch-startup-image" href = "startup.png">

<! -- Allows you to use the startup interface function, which can only be accessed through the desktop home screen -->

<Meta name = "apple-mobile-web-app-capable" content = "yes"/>

<! -- Control the style of the status bar -->

<Meta name = "apple-mobile-web-app-status-bar-style" content = "black"/>

6. Set whether to use the auto-correction, auto-incomplete, and uppercase letters of the input.

<Input AutoCorrect = "off" AutoComplete = "off" autocapitalize = "off">

Ii. Mobile Special CSS

1. media queries

Meida queries allows you to achieve special effects based on screen resolution, orientation, and screen width.

There are two implementation methods: 1) embed CSS in the style sheet. 2) use the "Media" attribute in the link tag to introduce the CSS file. The following is an example:

This CSS works only when the screen is portrait (vertical:

@ Media all and (orientation: Portrait ){...}

<LINK rel = "stylesheet" Media = "All and (orientation: Portrait)" href = "portrait.css"/>

Here are some other examples:

// 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: 300 dpi ){

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: 299 DPI ){

Header {background-image: url(header-lowres.png );}

}

2. Other CSS

-WebKit-tap-Highlight-color (IOS): sets the system background color for clicking a hyperlink.

-WebKit-user-select: none; text cannot be selected.

-WebKit-touch-callout: None)

Iii. Special 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. Current Network Status of window. Navigator. Online

6. Whether window. Navigator. standalone is in full screen mode

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. triggered when the devicemotion user shake or move the mobile phone

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>

Reference: http://davidbcalhoun.com/2010/using-mobile-specific-html-css-javascript