CSS commonly used in mobile development

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:

?
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:

?
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"> // Encoding
<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 Offline Application Skill
<Meta name = "apple-mobile-web-app-status-bar-style" content = black "/> // hide the status bar
<Meta content = "black" name = "apple-mobile-web-app-status-bar-style"/> // specifies the style of the status bar at the top of Safari on the iPhone
<Meta content = "telephone = No" name = "format-detection"/> // tell the device to ignore recognizing numbers on the page as phone numbers
<Meta name = "author" contect = "mr. He"/>

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. (For details, refer to the JS series at the fingertips)

2. Link:

?
<LINK rel = "apple-touch-startup-image" href?#startup.png "/> // set the start page Image
<LINK rel = "apple-touch-icon" href?”iphon_tetris_icon.png "/> // a nice icon is displayed when you set bookmarks.
<LINK rel = "stylesheet" Media = "All and (orientation: Portrait)" href = "portrait.css"> // portrait Style
<LINK rel = "stylesheet" Media = "All and (orientation: Landscape)" href = "landscape.css" // Landscape Style
 
// The style used for Portrait Screen
<Style media = "All and (orientation: Portrait)" type = "text/CSS">
# Landscape {display: none ;}
</Style>
 
// The style used for landscape Screen
<Style media = "All and (orientation: Landscape)" type = "text/CSS">
# Portrait {display: none ;}
</Style>

3. Events: (see the JS series at your fingertips)

?
// 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:

?
// 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;
};< BR> };
// 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:

?
// 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:

?
// 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:

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

?
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,

?
<A href = "Tel: 12345654321"> call me </a>
<A href = "SMS: 12345654321"> text message </a>
Or for cells:
<TD onclick = "location. href = 'tel: 122 '">

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

?
<Input type = "text" autocapitalize = "off" AutoCorrect = "off"/>

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

?
-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.

?
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.

?
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.

?
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.

?
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.

?
-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.

?
Unicode-range: U + 00-ff, U + 980-9ff;
Limit "text" describes the specific text style, spacing, and automatic scrolling of the attribute.

?
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.

?
-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.

?
-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.

?
-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.

?
-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 (describe keyframes in the <style type = "text/CSS"> Section ):

?
@-WebKit-keyframes divzoom
{
0% {-WebKit-transform: Scale (0.01 )}
60% {-WebKit-transform: Scale (1.05 )}
80% {-WebKit-transform: Scale (0.95 )}
100% {-WebKit-transform: Scale (1.00 )}
}
. Szoom {-WebKit-Animation: divzoom 0.5 s audio-in-out}
(It is easy to understand. scale down an element from 0.01 times-small but not 0 times, up to 1.05 times, down to 0.95 times, and then to 1 times, that is, the normal size. The entire transition event is 0.5 seconds, and the Animation Mode is slow-in-out, that is, slow to fast and then slow. By default, only one transition is performed. This is the animation effect of the prompt message displayed on the iPhone !)
② Define elements (in the <body> segment ):

?
<Div id = "layerh" style = "-WebKit-border-radius: 12px; Border: 2px solid # FFF;-WebKit-box-Shadow: 0px 2px 4px #888; position: absolute; left: 24px; top: pixel PX; <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 (0.9, 48, 96 );
Background-image: url('bg-msg.png '); background-repeat: No-Repeat;
Z-index: 1; visibility: hidden; ">
<P> <span style = "font-size: 16pt; font-weight: bold"> usage instructions </span> </P>
<HR noshade size = "1">
<Div id = "helptext" style = "height: 120px"> description </div>
<HR noshade size = "1">
<Form name = "formv" method = "Post">
<Input type = "button" value = "OK" name = "B1"
Style = "width: 100%; Height: 40px; font-size: 14pt; ont-weight: bold;
Color: # ffffff; text-Shadow: 0px-1px 1px #000 ;"
Onclick = "layerh. style. Visibility = 'den den '">
</Form>
</Div>
③ Start an animation (in a javascript-Defined Function)

?
Function Phelp ()
{
Layerh. style. Visibility = 'visable'
Layerh.style.css text = "-WebKit-animation-delay:" + math. Random () + "Ms"
Layerh. classname = 'szoom'
}
(This startup function is easy to understand. But why do we need to use the-WebKit-animation-delay statement? This is because after an element transition is displayed, if its style does not change, the next transition animation cannot be displayed. We cleverly use the definition of the animation delay time to make it change, thus avoiding the above problems. The random number function math. Random () is used to generate a random number greater than 0 and less than 1. Of course, users will not notice the delay of a few milliseconds .)

Supplement:
1. Lock viewport

?
Ontouchmove = "event. preventdefault ()" // lock the viewport. the user interface is not moved for any screen operations (except for the pop-up keyboard ).
2. The style can be used to set the appearance of the clicked element:

?
-WebKit-tap-Highlight-color: Color
3. iPhone/iPod Detection
To develop a mobile website for a specific device, you must first perform device detection. The following describes how to use JavaScript to detect the UA of the iPhone/iPod and then turn 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, users can still disable it. It will also cause the client to refresh and transmit additional data, so the following is 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. the font size is automatically adjusted when the screen is rotated.

?
HTML, body, form, fieldset, P, Div, H1, H2, H3, H4, H5, H6 {-WebKit-text-size-adjust: none ;}
5. The iPhone only recognizes CSS.
If you do not want to detect devices, you can use CSS media queries to define styles for iPhone/iPod.

?
@ Media screen and (max-device-width: 480px ){}
6. Zoom out the image
Generally, a large image of a website is larger than 480 pixels in width. If you use the code above to limit scaling, the images displayed on the iPhone will obviously exceed the screen. Fortunately, the iPhone has enough functionality. We can use CSS to enable the iPhone to automatically scale down and display large images.

?
@ Media screen and (max-device-width: 480px ){
IMG {max-width: 100%; Height: auto ;}
}
7. Simulation: hover pseudo class
Because the iPhone does not have a mouse pointer, there is no hover event. The CSS: hover pseudo class is useless. However, the iPhone has a touch event. ontouchstart is similar to onmouseover, and ontouchend is similar to onmouseout. So we can use it to simulate hover. Use 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 increase the hover effect:

?
A: hover, A. Hover {/* your hover effect */}
In this way, you can design a link more like a button. In addition, this simulation can be used on any element.