HTML and CSS frequently used by mobile HTML)

Because I wrote a Mobile front-end for half a year, I found thisArticleThe summary is very good.

Move over http://adamlu.com /? P = 633

HTML, CSS, and JavaScript For WebKit

The previous article introduced some new HTML5 features and skills. Now I will summarize some more HTML, CSS, and JavaScript features 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

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

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

 
<Div-WebKit-Validation-bubble> <div-WebKit-Validation-bubble-arrow> </div> <div-WebKit-Validation-bubble-arrow-Clipper> </Div> <div-WebKit-Validation-bubble-message> error message </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:

Customized WebKit scrollbar/* let's get this party started */:-WebKit-scrollbar {width: 12px;}/* track */:: -WebKit-scrollbar-track {-WebKit-box-Shadow: Inset 0 0 6px rgba (0,0, 0, 0.3);-WebKit-border-radius: 10px; border-radius: 10px;}/* handle */:-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.5, 0,); }:- WebKit-scrollbar-thumb: window-inactive {Background: rgba (0.4, 0 );}
 

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

Window. addeventlistener ("orientationchange", function (e) {// window. orientation (0 is portrait, 90 and-90 are 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 );
 

New animation function of requestanimationframe ()

Element. webkitrequestfullscreen () calls the full screen function.

Read more:

Http://www.slideshare.net/franksvalli/mobile-html-css-and-javascript

Http://css-tricks.com/9130-custom-scrollbars-in-webkit/

Https://developer.mozilla.org/zh-CN/docs