Tips for mobile development: javascript and CSS code sharing _ javascript skills

This article mainly introduces essential tips for mobile phone Development: javascript and CSS code sharing. This article describes viewport (visible area) operations, Link Operations, javascript events, and so on, for more information, see 1. viewport:

That is, the visible area. For desktop browsers, we all know what the viewport is, that is, the area used to view the webpage after all the toolbar, Status Bar, and scroll bar are gone,
This is an effective region. Because the screen width of mobile devices is different from that of traditional web devices, we need to change the viewport;

In fact, we can operate on four attributes:

The Code is as follows:

Width-// The width of the viewport. The value ranges from 200 to 10,000. The default value is 980 pixels)
Height-// The height of the viewport (range from 223 to 10,000)

Initial-scale-// initial scaling ratio (range:> 0 to 10)

Minimum-scale-// minimum scale allowed by users
Maximum-scale-// maximum scale allowed by users

User-scalable-// can the user manually scale down (no, yes)

So how can we let Safari know about these settings? In fact, it is very simple, just a meta, like:

The Code is as follows:

// Encoding

// Another Offline Application Technique
// Hide the status bar
// The style of the status bar at the top of safari in the specified iphone
// Tell the device to ignore recognizing numbers on the page as phone numbers

After initial-scale = 1 is set, we can finally design the page at a ratio. Another important concept about viewport is that the iphone safari browser does not have a scroll bar at all, and does not simply "hide the scroll bar. The iphone's safari browser actually displays the webpage completely from the very beginning, and then uses viewport to view part of it. When you drag with your fingers, the page is not dragged, but the viewport. The browser behavior changes not only the scroll bar, but also the interaction events.

2. link:

The Code is as follows:

// Set the start page Image
// A nice icon is displayed when you set bookmarks.
// Portrait Mode

// The style used for Portrait Screen


// The style used for landscape Screen

3. Events:

The Code is as follows:

// Gesture event
Touchstart // triggered when the finger contacts 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 to move
Gestureend

// Screen rotation event
Onorientationchange

// Detect when the touch screen finger changes direction
Orientationchange

// Properties supported by the 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 (supported des scrolling)
PageY // Relative to the full page (supported des scrolling)
Target // Node the touch event originated from
Identifier // An identifying number, unique to each touch event

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

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-hand-90, screen-width:" + screen. width + "; screen-height:" + screen. height );
Break;
Case 90:
Alert ("right-hand 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 listening
AddEventListener ('load', function (){
OrientationChange ();
Window. onorientationchange = orientationChange;
});

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

The Code is as follows:

// Hide the address bar and prevent the scroll bar from appearing when handling events
AddEventListener ('load', function (){
SetTimeout (function () {windows. scrollTo (0, 1) ;}, 100 );
});

6. Double-finger sliding event:

The Code is as follows:

// Double-finger slide event
AddEventListener ('load', function () {window. onmousewheel = twoFingerScroll ;},
False // compatible with various browsers, indicating that the event handler is called in the bubble phase (true capture phase)
);
Function twoFingerScroll (ev ){
Var delta = ev. wheelDelta/120; // judge the delta value (such as positive and negative), and then perform the corresponding operation
Return true;
};

7. Determine if the iPhone is used:

The Code is as follows:

// Determine whether the iPhone is used:
Function isAppleMobile (){
Return (navigator. platform. indexOf ('ipad ')! =-1 );
};

8. localStorage:

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

The Code is as follows:

Var v = localStorage. getItem ('n ')? LocalStorage. getItem ('n'): ""; // if the data name is n, read it and assign it to the variable v.
LocalStorage. setItem ('n', v); // write data with the name n and value v
LocalStorage. removeItem ('n'); // delete data named n

9. Use special links:
If you disable automatic identification and want some phone numbers to be linked to the iPhone's dialing function, you can declare the phone link in this way,

The Code is as follows:

Call me
Text message

Or for cells:

The Code is as follows:

10. Automatic uppercase and automatic correction
To disable these two functions, you can use the autocapitalize and autocorrect Options:

The Code is as follows:

11. WebKit CSS:
① The "Box Model" describes the content of the surrounding box blocks, including boundaries and fills.

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 corner
-Webkit-box-sizing: sizing_model; border Constant Value: border-box/content-box
-Webkit-box-shadow: hoff voff blur color; // container shadow (parameters: horizontal X offset, vertical Y offset, Gaussian blur radius value, and 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;
-Webkit-appearance: push-button; // built-in CSS representation. Currently, only push-button is supported.

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

The Code is as follows:

Direction: rtl
Unicode-bidi: bidi-override; constant: bidi-override/embed/normal

③ "Visual effect" describes attributes and the content of the adjusted visual effect block, including overflow behavior, adjustment behavior, visibility, animation, transformation, and transition.

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 1 s linear; animated/linear/audio-in/audio-out/audio-in-out
-Webkit-backface-visibility: visibler; constant: 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), to (white ));
-Webkit-mask-image:-webkit-gradient (linear, left top, left bottom, from (rgba (,), to (rgba, 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 "generated content, automatic numbering, and listing" description attribute allows you to change an integral part of the content, create an automatic numbering chapter and title, and manipulate the style list content.

The Code is as follows:

Content: "Item" counter (section) "";
This resets the counter.
First section
> Two section
Three section
Counter-increment: section 1;
Counter-reset: section;

⑤ "Paging Media" describes the properties of performance and appearance, and controls the behavior of printed web pages, such as paging characters.

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

⑥ "Color and background" describes the components of the block-level elements and text content of the color under the attribute control background.

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

7 "font" is a factor within the selection range of text fonts that describe the nature. The report also describes the attributes used to download the font definition.

The Code is as follows:

Unicode-range: U + 00-FF, U + 980-9FF;

Limit "text" describes the specific text style, spacing, and automatic scrolling of the attribute.

The Code is as follows:

Text-shadow: #00 FFFC 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 10 s; constant: 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)
-Webkit-marquee-speed: fast/normal/slow
-Webkit-marquee-style: alternate/none/scroll/slide
-Webkit-text-fill-color: # ff6600; constant: 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

The layout "table" describes the layout and specific content of the Design Performance Table.

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; // sub-column
-Webkit-column-rule: 1px solid # fff;
Style: dashed, dotted, double, groove, hidden, inset, none, outset, ridge, solid

Refer "User Interface" description attribute, involving user interface elements in the browser, such as scrolling text area, scroll bar, and so on. The report also describes the properties outside the scope of the webpage content, such as the optical mark annotation style and display when you hold down the touch
Target, such as the link on the iPhone.

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.

The Code is as follows:

-Webkit-animation: title infinite injection-in-out 3 s;
Animation has the following attributes:
-Webkit-animation-name: // attribute name, which is the keyframes
-Webkit-animation-duration: 3 s // duration
-Webkit-animation-timing-function: // transition type: linear/linear (linear)/slow-in (slow to fast)/slow-out (fast to slow) /slow-in-out (slow to fast and then slow)/cubic-betiller
-Webkit-animation-delay: 10 ms // animation latency (0 by default)
-Webkit-animation-iteration-count: // number of cycles (1 by default), and infinite is unlimited
-Webkit-animation-direction: // animation Mode: normal (Forward playback by default); alternate (alternate direction, forward playback for the nth number, reverse playback for the odd number)

These can also be abbreviated. But what really impressed me is that keyframes can define an animation transformation process for calling, from 0% to 100% or from (0%) to (100% ). Simply put, as long as you have an idea, it is very easy to change the elements in this process.

The Code is as follows:

-Webkit-transform: type (scale/rotate/Tilt skew/shift 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 (*, *) coordinates. TranslateX and translateY can be abbreviated as: translate (*,*).

Example of simulating the pop-up message box (Alert:
① Define the transition (in