Essential skills for mobile phone development: javascript and CSS function code sharing

1. viewport:

That is the visible area. For desktop browsers, we all know what a viewport is, which is the area used to view web pages after removing all toolbars, status bars, scroll bars, etc.
This is the area where it really works. Since the screen width of mobile devices is different from that of traditional web, we need to change the viewport;

Actually there are 4 attributes we can operate:

Copy code The code is as follows:

width - // width of viewport (range from 200 to 10,000, default 980 pixels) 

height - // height of viewport (range from 223 to 10,000) 

initial-scale - // Initial scaling (ranging from >0 to 10) 

minimum-scale - // Minimum scale that the user is allowed to zoom to

maximum-scale - // The maximum ratio the user is allowed to zoom to

user-scalable - // Whether the user can manually shrink (no,yes)

So how exactly do these settings let Safari know? It’s actually very simple, just a meta, in the form:

Copy code The code is as follows:

 //Encoding

 // Another trick for offline applications 

 // Hide status bar
 //The style of the status bar at the top of safari in the specified iphone   

 //Tell the device to ignore numbers on the page as phone numbers

After setting initial-scale=1, we can finally design the page with a 1:1 ratio. Regarding viewport, another very important concept is: the iPhone's Safari browser has no scroll bars at all, and it is not a simple "hide scroll bar", it does not have this function at all. The iPhone's Safari browser actually displays the webpage in its entirety from the beginning, and then uses viewport to view a portion of it. When you drag with your finger, you are actually dragging not the page, but the viewport. The change in browser behavior is not limited to the scroll bar, the interaction events are also different from those on the ordinary desktop.

2. link:

Copy code The code is as follows:

 // Set the start page image

 // You can display beautiful icons when setting bookmarks

 // Portrait mode style 

//Style used for vertical screen 

//Style used in landscape mode

3. Event:

Copy code The code is as follows:

//Gesture event

touchstart //Triggered when a finger touches the screen

touchmove //Triggered when the finger that has touched the screen starts to move

touchend //Triggered when the finger leaves the screen

touchcancel

//Touch event

gesturestart //Triggered when two fingers touch the screen

gesturechange //Triggered when two fingers touch the screen and start moving

gestureend

//Screen rotation event 

onorientationchange 

// Detect when the finger touching the screen changes direction 

orientationchange 

//Related attributes supported by touch event

touches 

targetTouches 

changedTouches                                                                                               
clientX　　　// X coordinate of touch relative to the viewport (excludes scroll offset)  

clientY　　　// Y coordinate of touch relative to the viewport (excludes scroll offset)  

screenX　 // Relative to the screen   

screenY // Relative to the screen 

pageX　　　　// Relative to the full page (includes scrolling)  

pageY　　　 // Relative to the full page (includes scrolling)  

target　　 // Node the touch event originated from  

identifier　 // An identifying number, unique to each touch event

4. Screen rotation event: onorientationchange Add screen rotation event listening to discover the screen rotation status (left rotation, right rotation, or no rotation) at any time. Example:

Copy code The code is as follows:

// Determine whether the screen is rotated 

function orientationChange() { 

switch(window.orientation) { 

Case 0: 

                 alert("Portrait mode 0,screen-width: " screen.width "; screen-height: " screen.height); 

              break; 

Case -90: 

alert("Left rotation -90,screen-width: " screen.width "; screen-height:" screen.height); 

              break; 

Case 90: 

                     alert("Right rotation 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; 

};
};

//Add event listener 

addEventListener('load', function(){ 

orientationChange(); 

​ window.onorientationchange = orientationChange; 

});

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

Copy code The code is as follows:

// Hide the address bar & prevent the scroll bar from appearing when handling events 

addEventListener('load', function(){ 

setTimeout(function(){ window.scrollTo(0, 1); }, 100); 

});

6. Two-finger sliding event:

Copy code The code is as follows:

// Two-finger sliding event

addEventListener('load', Function(){ window.onmousewheel = twoFingerScroll;}, 

                                                                                                                                             // Compatible with all browsers, means that the event handler is called during the bubbling phase (true capture phase) 

); 

function twoFingerScroll(ev) { 

var delta =ev.wheelDelta/120; var delta =ev.wheelDelta/120; //Judge the delta value (such as positive or negative), and then perform the corresponding operation 

Return true; 

};

7. Determine whether it is an iPhone:

Copy code The code is as follows:

// Determine whether it is an iPhone: 

function isAppleMobile() { 

Return (navigator.platform.indexOf('iPad') != -1); 

};

8. localStorage:

Example: (Note that the data name n should be enclosed in quotation marks)

Copy code The code is as follows:

var v = localStorage.getItem('n') ? localStorage.getItem('n') : ""; // If the data with the name n exists, read it out and assign it to the variable v . 

localStorage.setItem('n', v);                                                                                                                                                            
localStorage.removeItem('n');                                                                                

9. Use special links:
If you turn off automatic recognition and want some phone numbers to be linked to the iPhone’s dialing function, you can declare the phone link like this,

Copy code The code is as follows:

Call me

Send SMS

Or for cells:

Copy code The code is as follows:

10. Auto-capitalization and auto-correction

To turn off these two features, you can use the autocapitalize and autocorrect options:

Copy code The code is as follows:

11. WebKit CSS:

① The "box model" specifically describes the content of the bounding box block, including borders, filling, etc.

Copy code The code is as follows:

-webkit-border-bottom-left-radius: radius;

-webkit-border-top-left-radius: horizontal_radius vertical_radius;
-webkit-border-radius: radius; //Container rounded corners
-webkit-box-sizing: sizing_model; border constant value: border-box/content-box
-webkit-box-shadow: hoff voff blur color; //Container shadow (the 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) 25 25 25 25 round/stretch round/stretch;
-webkit-appearance: push-button; //Built-in CSS performance, currently only supports push-button

②The "visual formatting model" describes the properties and determines the position and size of block elements.

Copy code The code is as follows:

direction: rtl

unicode-bidi: bidi-override; constant: bidi-override/embed/normal

③ "Visual Effects" describes attributes and adjusts the contents of the visual effects block, including overflow behavior, adjustment behavior, visibility, animation, transformation, and transition.

Copy code The code is as follows:

clip: rect(10px, 5px, 10px, 5px)

resize: auto; constant: auto/both/horizontal/none/vertical

visibility: 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; Constant: visible (default value)/hidden

-webkit-box-reflect: right 1px; Mirror reverse

-webkit-box-reflect: below 4px -webkit-gradient(linear, left top, left bottom,

from(transparent), color-stop(0.5, transparent), to(white));

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

④The "Generate content, auto-number, and list" description attribute allows you to change a component of content, create auto-numbered chapters and titles, and manipulate the style of listing content.

Copy code The code is as follows:

content: “Item” counter(section) ” “;

This resets the counter.

First section

>two section

three sections

counter-increment: section 1;

counter-reset: section;

⑤ "Paging media" describes the properties of performance and appearance, controlling the behavior of printed versions of web pages, such as page breaks.

Copy code The code is as follows:

page-break-after: auto; Constant: always/auto/avoid/left/right

page-break-before: auto; Constant: always/auto/avoid/left/right

page-break-inside: auto; Constant: auto/avoid

⑥The "Color and Background" description attribute controls the background of block-level elements and the color of text content components.

Copy code The code is as follows:

-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 that specifically describes the nature of text font selection. The report also describes the properties used to download font definitions.

Copy code The code is as follows:

unicode-range: U 00-FF, U 980-9FF;

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

Copy code The code is as follows:

text-shadow: #00FFFC 10px 10px 5px;

text-transform: capitalize; constant: capitalize/lowercase/none/uppercase

word-wrap: break-word; constant: break-word/normal

-webkit-marquee: right large infinite normal 10s; Constants: direction (direction) increment (number of iterations) repetition (repetition) style (style) speed (speed); 

-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; constant: 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

⑨ "Table" describes the layout and specific contents of the design performance table.

Copy code The code is as follows:

-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

⑩The "user interface" description attribute involves user interface elements in the browser, such as scrolling text areas, scroll bars, etc. The report also describes properties outside the scope of the page content, such as the cursor's callout style and display when you hold down touch
Target, like a link on an iPhone.

Copy code The code is as follows:

-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 transition
This is the most innovative feature in Webkit: defining animations using transition functions.

Copy code The code is as follows:

-webkit-animation: title infinite ease-in-out 3s;

animation has these attributes: 

-webkit-animation-name: //Attribute name is the keyframes we defined

-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 and then again slow) /cubic-bezier

-webkit-animation-delay: 10ms //Animation delay (default 0)

-webkit-animation-iteration-count: //Number of loops (default 1), infinite is infinite

-webkit-animation-direction: //Animation mode: normal (default forward playback); alternate (alternating direction, even-numbered forward playback, odd-numbered reverse playback)

These can also be abbreviated. But what really makes me feel great is keyframes, which can define an animation transformation process for calling, the process is 0% to 100% or from (0%) to to (100%). To put it simply, as long as you have an idea, it is very simple how you want the elements to change during the process.

Copy code The code is as follows:

-webkit-transform: type (scale/rotate/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) Skew angle. skewX and skewY can be abbreviated as: skew(*, *)

translate(*,*) coordinate movement. translateX and translateY can be abbreviated as: translate(*, *).

Example of implementing a simulated pop-up message box (Alert):
① Define transition (describe keyframes in the

Essential skills for mobile phone development: javascript and CSS function code sharing_javascript skills