WebKit development, App Mobile front-end knowledge points

If you're a front-end er and want to make your own app on a mobile device, how do you do it? Fortunately, the WebKit kernel browser can help us do all this. Contact with the development of WebKit WebApp for some time, now some of the skills to share to you:

1. Viewport:
The visible area. For the desktop browser, we all know exactly what viewport is, and that is to go out all the toolbars, the status bar, the scroll bar, and so on to look at the page area,
This is a truly effective area. Because the mobile device screen width is different from the traditional web, we need to change the viewport;

There are actually 4 properties that we can manipulate:

Width-             //  viewport (range from 200 to 10,000, default is 980 pixels)            Height-//  viewport (range from 223 to 10, Initial-scale-     //  initial scaling (range from >0 to ten) Minimum-scale-    //   minimum scale to allow the user to zoom Maximum-scale-    //   allows the user to zoom to the maximum scale user-scalable-    //   whether the user can manually indent (no,yes)

So how do these settings make safari aware? In fact, it's very simple, just a meta, shaped like:

<meta http-equiv= "Content-type" content= "text/html; charset=utf-8" >   //Coding <meta id= "viewport" name= " Viewport "content=" width=320; initial-scale=1.0;maximum-scale=1.0; User-scalable=no; " /><meta name= "apple-mobile-web-app-capable" content= "yes"/>  //Another technique for offline applications <meta name= " Apple-mobile-web-app-status-bar-style "Content=black"/>  //Hide status bar <meta content= "Black" name= " Apple-mobile-web-app-status-bar-style "/>//The style of the status bar on safari top in the specified iphone <meta content=" Telephone=no "Name=" Format-detection "/>       //Tell the device to ignore the number in the page as the phone number <meta name=" Author "contect=" mr.he "/>

After setting up the initial-scale=1, we can finally make the page design at a rate of 1:1. Another important concept about viewport is that the iphone's Safari browser has no scroll bar at all, and it's not a simple "hide scroll bar", and there is no such feature at all. The iphone's Safari browser actually displays the page completely from the beginning, and then uses viewport to see a portion of it. When you drag with your finger, you actually drag the page instead of the viewport. The browser behavior changes more than the scroll bar, and the interaction event is not the same as the normal desktop. (Please refer to: Fingertips of the next JS series article)

2. Link:

<link rel= "Apple-touch-startup-image" href= "startup.png"/>//Set start page picture <link rel= "Apple-touch-icon" href= " Iphon_tetris_icon.png "/>//can display good-looking icons when setting bookmarks <link rel=" stylesheet "media=" All and (orientation:portrait) "href = "Portrait.css" >    //portrait mode style <link rel= "stylesheet" media= "All and (Orientation:landscape)" href= " Landscape.css "   //Landscape mode style//vertical screen with style <style media=" All and (orientation:portrait) "type=" Text/css "># landscape {Display:none;} </style>//style used when traversing <style media= "all and Orientation:landscape" type= "Text/css" > #portrait {display: None }</style>

3. Event: (Please refer to: Fingertips of the next JS series article)

Gesture Event Touchstart            //triggers when the finger touches the screen touchmove           //When the finger that has touched the screen starts to move touchend             //triggers when the finger leaves the screen touchcancel// Touch Event Gesturestart          //When two fingers touch the screen trigger Gesturechange      //Trigger gestureend//screen rotation event when two fingers start to move after touching the screen onorientationchange/ /Detect when the touch screen finger changes Direction orientationchange//touch event supported related properties TOUCHESTARGETTOUCHESCHANGEDTOUCHESCLIENTX//X coordinate of touch Relative to the viewport (excludes scroll offset) ClientY//Y coordinate of touch relative to the viewport (excludes SC Roll offset) ScreenX//Relative to the Screenscreeny  //Relative to the Screenpagex//Relative to the full Page (includes scrolling) Pagey//Relative to the full page (includes scrolling) target//Node the Touch event ori ginated fromidentifier   //An identifying number, unique to each touch event

4. Screen Rotation event: Onorientationchange
Add a screen rotation event to listen to the screen rotation status (left, right, or not) at any time. Example:

Determines whether the screen rotates function orientationchange () {switch (window.orientation) {case 0:alert ("Portrait mode 0,screen-width:" + Screen.width + "; Screen-height: "+ screen.height); Break;case-90:alert (" Left-hand -90,screen-width: "+ Screen.width +"; Screen-height: "+ screen.height); Break;case 90:alert (" Right-handed 90,screen-width: "+ Screen.width +"; Screen-height: "+ screen.height); Break;case 180:alert (" Landscape mode 180,screen-width: "+ Screen.width +"; Screen-height: "+ screen.height); break;}; <br>};//Add Event Listener addeventlistener (' Load ', function () {orientationchange (); window.onorientationchange = Orientationchange;});

5. Hide the Address bar & when handling events, prevent the scroll bar from appearing:

When hiding the Address bar  & handling events, prevent the scrollbar from appearing addeventlistener (' Load ', function () {setTimeout () {window.scrollto (0, 1)} , 100);});

6. Two-hand finger swipe event:

Two-hand finger swipe event AddEventListener (' Load ', function () {Window.onmousewheel = Twofingerscroll;},false              //compatible with each browser, Indicates that the event handler is called during the bubbling phase (true capture phase)); function Twofingerscroll (EV) {var delta =ev.wheeldelta/120;              Determine the delta value (for example, plus or minus), and then perform the corresponding operation return true;};

7. Determine if it is an iphone:

Determine if Iphone:function isapplemobile () {return (navigator.platform.indexOf (' iPad ') = 1);};

8. Localstorage:
Example: (Note data name N to enclose in quotation marks)

var v = localstorage.getitem (' n ')? Localstorage.getitem (' n '): "";   If the data with the name  n is present, it is read out and given the variable  v  . Localstorage.setitem (' n ', v);                                           Writes a  data localstorage.removeitem (' n ') with a name of N and a value of V;                                           Delete  data with name N

9. Use special Links:
If you turn off auto-recognition and want some phone numbers to link to your iPhone's dialing capabilities, you can use this to declare a phone link,

<a href= "tel:12345654321" > Call me </a><a href= "sms:12345654321" > Texting </a> or for cells: <td onclick = "location.href= ' tel:122 '" >

10. Automatic capitalization and auto-correction
To turn these two features off, you can use the Autocapitalize and AutoCorrect options:

<input type= "text" autocapitalize= "Off" autocorrect= "off"/>

One. WebKit CSS:
① "box Model" specifically describes the nature of the bounding box block content, including boundaries, padding, and so on.

-webkit-border-bottom-left-radius:radius;-webkit-border-top-left-radius:horizontal_radius vertical_radius;- Webkit-border-radius:radius;      Vessel Fillet-webkit-box-sizing:sizing_model; Border constant value: Border-box/content-box-webkit-box-shadow:hoff voff blur color; Container Shadows (Parameters are: horizontal x-direction offset; vertical y-direction offset; Gaussian blur radius value; shadow color value)-webkit-margin-bottom-collapse:collapse_behavior; Constant Value: Collapse/discard/separate-webkit-margin-start:width;-webkit-padding-start:width;-webkit-border-image:url ( borderimg.gif) Round/stretch Round/stretch;-webkit-appearance:push-button;   Built-in CSS performance, temporarily only support push-button

The ② "visual formatting Model" describes the nature of the block elements that determine the location and size.

Direction:rtlunicode-bidi:bidi-override; Constant: Bidi-override/embed/normal

③ "Visual Effects" describes properties that adjust the visual effects of block content, including overflow behavior, adjustment behavior, visibility, animation, transformations, and transitions.

Clip:rect (10px, 5px, 10px, 5px) Resize:auto; Constant: auto/both/horizontal/none/verticalvisibility:visible; constant: collapse/hidden/visible-webkit-transition:opacity 1s linear; Animation effect Ease/linear/ease-in/ease-out/ease-in-out-webkit-backface-visibility:visibler; Constants: Visible (default)/hidden-webkit-box-reflect:right 1px; Mirror reversal-webkit-box-reflect:below 4px-webkit-gradient (linear, left top, left bottom,from (Transparent), color-stop (0.5, Transparent)-webkit-mask-image:-webkit-gradient (linear, left top, left bottom, from (Rgba (0,0,0,1)), to ( RGBA (0,0,0,0)));;   CSS Mask/Mask effect-webkit-mask-attachment:fixed; Constant: Fixed/scroll-webkit-perspective:value; Constant: None (default)-webkit-perspective-origin:left top;-webkit-transform:rotate (5deg);-webkit-transform-style: preserve-3d; Constant: flat/preserve-3d; (2D and 3D)

④ "generated content, AutoNumber, and List" describes the properties that allow you to change the content of a component, create an auto-numbered chapter and title, and manipulate the content of the style list.

Content: "Item" Counter (section) ""; This resets the counter. First Section>two sectionthree sectioncounter-increment:section 1;counter-reset:section;

⑤ "Paging Media" describes performance and appearance properties that control the behavior of a printed version of a webpage, such as a page break.

Page-break-after:auto; Constant: Always/auto/avoid/left/rightpage-break-before:auto; Constant: Always/auto/avoid/left/rightpage-break-inside:auto; Constant: Auto/avoid

⑥ the "color and Background" Description property controls the component of the text content of block-level elements and colors under the background.

-webkit-background-clip:content; Constant: border/content/padding/text-webkit-background-origin:padding; Constant: border/content/padding/text-webkit-background-size:55px; Constant: length/length_x/length_y

⑦ "Font" is a factor in the selection of text fonts that specifically describe the nature of the font. The report also describes the properties used to download the font definition.

Unicode-range:u+00-ff, u+980-9ff;

⑧ "Text" describes the specific text style, spacing, and automatic scrolling of properties.

Text-shadow: #00FFFC 10px 10px 5px;text-transform:capitalize; Constant: Capitalize/lowercase/none/uppercaseword-wrap:break-word; Constant: break-word/normal-webkit-marquee:right large infinite normal 10s; Constant: direction (direction) increment (iteration count) repetition (repetition) style (style) speed (velocity);-webkit-marquee-direction:ahead/auto/backwards /down/forwards/left/reverse/right/up-webkit-marquee-incrementt:1-n/infinite (infinite times)-webkit-marquee-speed:fast/ Normal/slow-webkit-marquee-style:alternate/none/scroll/slide-webkit-text-fill-color: #ff6600; Constants: Capitalize, lowercase, none, uppercase-webkit-text-security:circle; Constant: Circle/disc/none/square-webkit-text-size-adjust:none; constants: auto/none;-webkit-text-stroke:15px #fff;-webkit-line-break:after-white-space; Constant: Normal/after-white-space-webkit-appearance:caps-lock-indicator;-webkit-nbsp-mode:space; Constant: normal/space-webkit-rtl-ordering:logical; Constant: visual/logical-webkit-user-drag:element; Constant: element/auto/none-webkit-user-modify:read-only; Constant: READ-WRITE-PLAINTEXT-ONLY/READ-WRIte/read-only-webkit-user-select:text; Constant: Text/auto/none

⑨ the details of the layout and design performance table described in "table".

-webkit-border-horizontal-spacing:2px;-webkit-border-vertical-spacing:2px;-webkit-column-break-after:right; Constant: always/auto/avoid/left/right-webkit-column-break-before:right; Constant: always/auto/avoid/left/right–webkit-column-break-inside:logical; Constant: Avoid/auto-webkit-column-count:3; Column-webkit-column-rule:1px solid #fff; style:dashed,dotted,double,groove,hidden,inset,none,outset,ridge,solid

⑩ "User Interface" describes attributes that involve user interface elements in the browser, such as scrolling text area, scroll bar, and so on. The report also describes attributes that are outside the scope of the page content, such as the cursor's callout style and display when you hold down touch touch
Target, such as a link on the iphone.

-WEBKIT-BOX-ALIGN:BASELINE,CENTER,END,START,STRETCH constant: baseline/center/end/start/stretch-webkit-box-direction: normal; constant: Normal/reverse-webkit-box-flex:flex_valuet-webkit-box-flex-group:group_number-webkit-box-lines: multiple; Constant: Multiple/single-webkit-box-ordinal-group:group_number-webkit-box-orient:block-axis; Constant: block-axis/horizontal/inline-axis/vertical/orientation–webkit-box-pack:alignment; Constant: Center/end/justify/start

12. Animation transitions
This is the most innovative feature in Webkit: Defining animations using transition functions.

-webkit-animation:title Infinite ease-in-out 3s;animation has these properties:-webkit-animation-name://attribute name, Is our definition of keyframes-webkit-animation-duration:3s//Duration-webkit-animation-timing-function://Transition type: ease/linear (linear)/ Ease-in (slow to fast)/ease-out (fast to slow)/ease-in-out (slow to fast to slow)/cubic-bezier-webkit-animation-delay:10ms//animation delay (default 0)- Webkit-animation-iteration-count://Cycles (default 1), Infinite for infinite-webkit-animation-direction://Animation: normal (default forward playback); Alternate (alternate direction, first and second forward playback, odd number of reverse playback)

These can also be abbreviated. But what really makes me feel good is that keyframes, which can define an animation's transition process for invocation, is 0% to 100% or from (0%) through to (100%). Simply put, as long as you have an idea, it is easy for you to make the element change in the way it is in the process.

-webkit-transform: Type (scale scale/rotation rotate/tilt skew/Displacement translate) scale (num,num) magnification. ScaleX and ScaleY (3) can be abbreviated as: scale (*, *) rotate (*deg) rotation angle. Rotatex and Rotatey, can be abbreviated as: rotate (*, *) Skew (*deg) tilt angle. Skewx and Skewy, can be abbreviated as: Skew (*, *) translate (*,*) coordinate movement. TranslateX and Translatey, can be abbreviated as: translate (*, *).

Examples of implementing a mock popup message box (Alert):
① defining transitions (described keyframes in <style type= "Text/css" > Segment):

@-webkit-keyframes divzoom{0% {-webkit-transform:scale (0.01)}60% {-webkit-transform:scale (1.05)}80% {-webkit-trans Form:scale (0.95)}100% {-webkit-transform:scale (1.00)}}.szoom {-webkit-animation:divzoom 0.5s ease-in-out}

(It's easy to see that the elements are 0.01 times times smaller--small but not 0 times times, magnified to 1.05 times times, scaled down to 0.95 times times, and then to 1 time times the normal size.) The entire transition process event is 0.5 seconds, animated in ease-in-out, i.e. slow to fast and slow, with only 1 transitions by default. This is exactly what you often see in the IPhone popup with the animated effect of the cue message! ）
② defining elements (in <body> section):

 <div id= "Layerh" style= "-WEBKIT-BORDER-RADIUS:12PX; border:2px solid #FFF;-webkit-box-shadow:0px 2px 4px #888; Position:absolute; left:24px; top:106px;<br>width:256px; height:268px; padding-left:8px; Padding-right:8px;color: #FFFFFF; text-shadow:1px 1px 1px #000; Text-align:center;background-color:rgba (32,48,96,0.9); Background-image:url (' bg-msg.png '); Background-repeat:no-repeat;z-index:1; Visibility:hidden; "><p><span style=" FONT-SIZE:16PT; Font-weight:bold "> Instruction </span></p>
③ start animation (in JavaScript-defined functions)
function Phelp () {layerH.style.visibility = ' visible ' LayerH.style.cssText = '-webkit-animation-delay: ' + math.random () + "MS" Layerh.classname = ' szoom '}
(This startup function is well understood.) But why use the-webkit-animation-delay sentence? Because when an element transitions display is complete, the next time you cannot animate the transition, if its style does not change. We have cleverly used its animation delay time definition to make it change, avoiding the above problems. Where the random number function math.random () is used to produce a random number greater than 0 less than 1. Of course, the user is not aware of the delay of fraction milliseconds. )
Add:
1. Lock viewport
Ontouchmove= "Event.preventdefault ()"//Lock viewport, any screen operation does not move the user interface (except for the pop-up keyboard).
2. The appearance of the clicked element changes, you can use the style to set:
-webkit-tap-highlight-color: Color
3. Detecting Iphone/ipod
To develop a mobile website for a particular device, the first thing to do is to detect the device. Here is the UA that detects iphone/ipod using JavaScript and then turns to the exclusive URL.
if ((Navigator.userAgent.match (/iphone/i)) | | (Navigator.userAgent.match (/ipod/i))) {if (Document.cookie.indexOf ("iphone_redirect=false") = =-1) {window.location = "http://m.example.com";}}
Although JavaScript can be run on a fruit device, the user can still disable it. It also causes client refreshes and additional data transfers, so here's the server-side detection and steering:
if (strstr ($_server[' http_user_agent '), ' IPhone ') | | strstr ($_server[' http_user_agent '], ' IPod ') {header (' Location: Http://yoursite.com/iphone '); exit ();}
4. Prevent automatic font resizing when rotating the screen
HTML, body, form, fieldset, p, Div, H1, H2, H3, H4, H5, h6 {-webkit-text-size-adjust:none;}
5. The iphone only recognizes the CSS
If you do not want device detection, you can use CSS media queries to define styles specifically for iphone/ipod.
@media screen and (max-device-width:480px) {}
6. Reduce the picture
The larger image of the site is usually more than 480 pixels wide, and if you use the previous code to limit the zoom, the images will obviously exceed the screen in the iphone version. Fortunately for the iphone, we can use CSS to let the iphone automatically zoom out the big picture. 
@media screen and (max-device-width:480px) {Img{max-width:100%;height:auto;}}
7. Simulation: hover pseudo-Class
There is no hover event because the iphone does not have a mouse pointer. Then the Css:hover pseudo-class is useless. But the iphone has a touch event, ontouchstart similar to onmouseover,ontouchend similar to onmouseout. So we can use it to simulate hover. Using javascript:
var mylinks = document.getElementsByTagName (' a '); for (var i = 0; i < mylinks.length; i++) {Mylinks[i].addeventlistener ( ' Touchstart ', function () {this.classname = "hover";}, False); Mylinks[i].addeventlistener (' Touchend ', function () { This.classname = "";}, False);}
Then use CSS to add hover effects:
A:hover, A.hover {/* your hover effect */}
This way, you can design a link that feels more like a button. Also, this simulation can be used on any element.
Dimensions of mobile devices
ipod Touch 4/iphone4/iphone4s
Vertical screen
Width/height 320/356
Horizontal screen
Width/height 480/208
Iphone5
Vertical screen
Width/height 320/444
Horizontal screen
Width/height 568/208
ipad Mini
Vertical screen
Width/height 768/928
Horizontal screen
Width/height 1024/672
New Pad
Vertical screen
Width/height 768/928
Horizontal screen
Width/height 1024/672
Ready-to-webkit solutions
1. Drop-down Refresh
Pull-to-refresh
2, Carousel
Carousel
3. Zoom
Wktouch
4. Slide Show
Swipeslide
WebKit development, App Mobile front-end knowledge points