HTML, CSS, and JavaScript For WebKit

HtmlFrom the beginning to the end of the HTML document:

<Meta name = "viewport" content = "width = device-width, initial-scale = 1.0"/> make the width of the content adaptive to the width of the device, one that must be added to mobile Web

<Meta name = "format-detection" content = "telephone = No"]> disable mobile phone number links (for iPhone)

<LINK rel = "apple-touch-icon" href?”icon.png "/> set the icon of Your webpage in the size of 57x57 PX

<! -IOS 2.0 +: Tell IOS not 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 = "72 × 72" href?#touch-icon-ipad.png "/>

<LINK rel = "apple-touch-icon" sizes = "114 × 114" href?#touch-icon-iphone4.png "/>

<LINK rel = "apple-touch-startup-image" href?#startup.png "> full screen startup screen image, in the size of 320x460 PX

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

<Meta name = "apple-mobile-web-app-status-bar-style" content = "black"/> controls the appearance of the top status bar in full screen mode. The default value is white.

<Input AutoCorrect = "off" AutoComplete = "off" autocapitalize = "off"> cancel auto-completion and auto-UPPERCASE letters (applicable to mobile)

<Input type = "text" X-WebKit-Speech/> Voice Input

<Input type = "file" Accept = "image/*; capture = camera"/> upload a file to capture media from the camera, the same below

<Input type = "file" Accept = "Video/*; capture = camcorder"/>

<Input type = "file" Accept = "audio/*; capture = microphone"/>

<A href = "SMS: 18005555555, 18005555556"]> send a text message to a link of multiple users.

<A href = "SMS: 18005555555? Body = text % 20 goes % 20here "]> send the link to the content included in the text message

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

CSS:

-WebKit-tap-Highlight-color: transparent; set the color to transparent when the link is highlighted on mobile.

-WebKit-user-select: none; set to unable to select text

-WebKit-touch-callout: None

:-WebKit-full-screen canvas {} style in full screen mode (for desktop)

Div P: matches (EM, B, strong) {} Use mathes to match multiple selectors

@ Media only screen and (max-width: 480px) {} specifies the mobile device or small screen desktop screen

@ Media (-WebKit-Min-device-pixel-ratio: 2), (min-resolution: 300 dpi) {specifies a high-resolution screen device

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

}

@ Media (-WebKit-max-device-pixel-ratio: 1.5), (max-resolution: 299 DPI) {specifies a low-resolution screen device

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

}

Background-repeat: space; Background-repeat: round; the background attributes of these two css3 types are worth studying.

Width: calc (100%-40px); calculates the width.

Text-Decoration: # ff8800 wavy ine-through; wavy Link

Text-rendering: optimizelegibility; with this attribute, the distance between characters is tightened.

Font-variant-ligatures: Common-ligatures; Set CSS concatenation

Transform: Rotate (90); Rotate 90 degrees

Transform-origin: center; transform-origin can change the conversion position

-WebKit-appearance: none;-WebKit-appearance can be used to change buttons or other controls that look similar to local controls.

Beautification Form validation prompt Style

1	:-WebKit-Validation-bubble {}

2

3	:-WebKit-Validation-bubble-message {}

4

5	:-WebKit-Validation-bubble-arrow {}

6

7	:-WebKit-Validation-bubble-arrow-Clipper {}

When a prompt appears, it is similar to the following structure

1	<Div -WebKit-Validation-bubble>

2

3	<Div -WebKit-Validation-bubble-arrow> </Div>

4

5	<Div -WebKit-Validation-bubble-arrow-Clipper> </Div>

6

7	<Div -WebKit-Validation-bubble-message> error message </Div>

8

9

</Div>

Customize the WebKit browser scroll bar. For details, see Google Reader and other effects in Chrome/safari. The following is an example of the scroll bar style.CodeAs follows:

View Source

Print?

01	Customized WebKit scrollbar/* Let's get this party started */

02

03	:-WebKit-scrollbar {

04

05	Width:12px;

06

07

}

08

09	/* Track */

10

11	:-WebKit-scrollbar-track {

12

13	-WebKit-box-Shadow:Inset 0 0 6px Rgba (0,0,0,0.3);

14

15	-WebKit-border-radius:10px;

16

17	Border-radius:10px;

18

19

}

20

21	/* Handle */

22

23	:-WebKit-scrollbar-thumb {

24

25	-WebKit-border-radius:10px;

26

27	Border-radius:10px;

28

29	Background: Rgba (255,0,0,0.8);

30

31	-WebKit-box-Shadow:Inset 0 0 6px Rgba (0,0,0,0.5);

32

33

}

34

35	:-WebKit-scrollbar-thumb: window-inactive {

36

37	Background: Rgba (255,0,0,0.4);

38

39

}

-WebKit-Background-composite: plus-Darker;-WebKit-Background-composite is used to set the combination style of the background or color of an element.

-WebKit-text-stroke: 1px rgba (0.5, 0,);-WebKit-text-stroke can be used to add stroke to text

-WebKit-mask-image: URL (/path/to/mask.png); define an image to mask Elements

-WebKit-box-reflect: Below 5px; defines the reflection of an element.

: Local-link {font-weight: normal;} The local-link can define the link style of the relative address.

Javascript:

Window. scrollto (0, 0); hide the address bar

Window. matchmedia (); match Media

Navigator. connection; determines whether the phone is running on a Wi-Fi/3G network.

Window. devicepixelratio; determines the screen resolution (iPhone 4 is 2, and Nexus One is 1.5)

Window. Navigator. Online; gets the network connection status

Window. Navigator. standalone; determines whether the iPhone is in full screen status.

Touch events (IOS, Android 2.2 +): touchstart, touchmove, touchend, touchcancel

Gesture events (Apple only, IOS 2 +): gesturestart, gesturechange, gesturend give access to predefined gestures (rotation, scale, position)

01	Window. addeventlistener ("Orientationchange",Function(E ){

02

03	// Window. Orientation (0 is portrait, 90 and-90 are landscape)

04

05

},False);

06

07	Window. addeventlistener ("Deviceorientation",Function(E ){

08

09	// E. Alpha

10

11	// E. Beta

12

13	// E. Gamma

14

15

},False);

16

17	Window. addeventlistener ("Devicemotion",Function(E ){

18

19	// E. accelerationincludinggravity. x

20

21	// E. accelerationincludinggravity. Y

22

23	// E. accelerationincludinggravity. Z

24

25

},False);

New animation function of requestanimationframe ()

Element. webkitrequestfullscreen () calls the full screen function.