Code snippets commonly used in the development of WEBAPP

In fact, most of this is the code above IOS. Other platforms are not verified.

HTML, from the beginning of the HTML document to the end of the arrangement:

<meta name= "viewport" content= "width=device-width, initial-scale=1.0″/> let the width of the content adaptive to the width of the device, in the mobile Web must add a

<meta name= "format-detection" content= "Telephone=no"]]> disable mobile phone Number link (for IPhone)

<link rel= "Apple-touch-icon" href= "Icon.png"/> Set the icon for your Web page, size 57x57 px

<!–ios 2.0+: Tell IOS don't to apply any glare effects to the icon–>

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

<!–ios 4.2+ 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 "/>

<link rel= "Apple-touch-startup-image" href= "startup.png" > Start screen image at full screen startup, size 320x460 px

<meta name= "apple-mobile-web-app-capable" content= "yes"/> Whether to allow full-screen display, only available when the desktop is started

<meta name= "Apple-mobile-web-app-status-bar-style" content= "Black"/> controls the appearance of the top status bar at full screen, default white

<input autocorrect= "Off" autocomplete= "off" autocapitalize= "Off" > Cancel Auto-complete, automatically capitalize word letters (for mobile)

<input type= "text" X-webkit-speech/> Voice input

<input type= "file" accept = "Image::-webkit-scrollbar {width:12px;}::-webkit-scrollbar-track {-webkit-box-shadow: Inset 0 0 6px Rgba (0,0,0,0.3); -webkit-border-radius:10px; border-radius:10px; }::-webkit-scrollbar-thumb {-webkit-border-radius:10px; border-radius:10px; Background:rgba (255,0,0,0.8);- Webkit-box-shadow:inset 0 0 6px Rgba (0,0,0,0.5); }::-webkit-scrollbar-thumb:window-inactive {Background:rgba (255,0,0,0.4);}

-webkit-background-composite:plus-darker; -webkit-background-composite a combined style used to set the background or color of an element

-webkit-text-stroke:1px Rgba (0,0,0,0.5); -webkit-text-stroke can be used to add strokes to text

-webkit-mask-image:url (/path/to/mask.png); Define a picture to mask the element

-webkit-box-reflect:below 5px; Defines the reflection of an element

: local-link {font-weight:normal;} Local-link can define link styles for relative addresses

Javascript:

Window.scrollto (0,0); Hide the Address bar

Window.matchmedia (); Match Media

Navigator.connection; Determine if the phone is running on a network such as wifi/3g

Window.devicepixelratio; Determine screen resolution (IPhone 4 value is 2, and Nexus One value is 1.5)

Window.navigator.onLine; Get Network Connection Status

Window.navigator.standalone; Determine if the iphone is in full-screen mode

Touch Events (IOS, Android 2.2+): Touchstart, Touchmove, Touchend, Touchcancel

Gesture event (Apple only, IOS in the same): Gesturestart, Gesturechange, gesturend give access to predefined gestures (rotation, scal E, Position)

Window.addeventlistener ("Orientationchange", function (e) {//window.orientation (0 is portrait, and and-90 is landscape) }, False); Window.addeventlistener ("Deviceorientation", function (e) {//e.alpha//e.beta//e.gamma}, False); Window.addeventlistener ("Devicemotion", function (e) {//e.accelerationincludinggravity.x// E.accelerationincludinggravity.y//e.accelerationincludinggravity.z}, False);

Requestanimationframe () New animation function

Element.webkitrequestfullscreen () Call full-screen function