Web Mobile development Tips and Considerations Summary

I. Use of META

1, <meta name= "viewport" content= "width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, User-scalable=no "/>

Forces the width of the document to remain at 1:1 of the width of the device, and the maximum width of the document is 1.0, and does not allow the user to click on the screen to enlarge

2, Winphone system A, input tag is clicked when the translucent gray background of how to remove:
<meta name= "Msapplication-tap-highlight" content= "no" >

3, ignore the number of pages for the phone, ignoring email identification
<meta name= "format-detection" content= "Telephone=no, Email=no"/>

Second, to adapt to the scaling method of equal ratio:

@media only screen and (min-width:1024px) {
body{zoom:3.2;}
}
@media only screen and (min-width:768px) and (max-width:1023px) {
body{zoom:2.4;}
}
@media only screen and (min-width:640px) and (max-width:767px) {
Body{zoom:2;}
}
@media only screen and (min-width:540px) and (max-width:639px) {
body{zoom:1.68;}
}
@media only screen and (min-width:480px) and (max-width:539px) {
body{zoom:1.5;}
}
@media only screen and (min-width:414px) and (max-width:479px) {
body{zoom:1.29;}
}
@media only screen and (min-width:400px) and (max-width:413px) {
body{zoom:1.25;}
}
@media only screen and (min-width:375px) and (max-width:413px) {
body{zoom:1.17;}
}
@media only screen and (min-width:360px) and (max-width:374px) {
body{zoom:1.125;}
}

Or as:

@media all and (Orientation:landscape) {

h2{color:red;} /* Font red at horizontal screen */

}

@media all and (orientation:portrait) {

H2{color:green;} /* Font green when vertical screen */

}

Third, the layout

1. Layout Use percent:

Different phones have different resolutions, and then use our PC-side layout commonly used PX is not suitable. Use percent layout always be clear about its parent element, because the percentage height of the child element is determined by the height of the parent element, when the height of the parent element is indeterminate, or when the height of the parent element is undefined, the height percentage of the child element is not used (no reference). So only the height of the parent element is set, and the percentage of the child element's height is useful.

2.em with REM:
EM is based on relative units, not fixed, he will inherit the parent element's font size, if there is no parent, then the relative datum point of EM is the browser font size, the browser font defaults to 16px, so if there is no parent element, relative to the browser size: xem=x*16px;
REM is a CSS3 new property that is set entirely relative to the HTML root element size, and defaults to 10px, so regardless of the parent font size, 1rem=10px.

3. Grid layout:
Box-sizing:border-box; You can change the way the box model is calculated to make it easier for you to set the width for an adaptive streaming layout.

4, WAP page has an IMG tag, remember to add display:block; attributes to address the 1px pixels of an img's margin gap. If the picture is to be adapted to a different phone, set the width:100% and cannot add a height.

5. About Flexbox Flexible box layout some properties
1. Horizontal vertical center with indefinite width and height
. xxx{
Position:absolute;
top:50%;
left:50%;
Z-index:3;
-webkit-transform:translate ( -50%,-50%);
border-radius:6px;
Background: #fff;
}
2. [Flexbox Version] Horizontal vertical center with variable width and height
. xx{
justify-content:center;//Sub-elements are centered horizontally,
align-items:center;//Sub-elements are vertically centered;
Display:-webkit-flex;
}

Iv. Processing of texts

1. Turn off auto-capitalization of iOS keyboard first letter
<input type= "text" autocapitalize= "Off"/>
2,//single-line text overflow

. xx{
Overflow:hidden;
White-space:nowrap;
Text-overflow:ellipsis;
}
3,//multi-line text overflow
. xx{
Display:-webkit-box!importmort;
Overflow:hidden;
Text-overflow:ellipsis;
Word-break:break-all;
-webkit-box-orient:vertical;
-webkit-line-clamp:2; (number 2 means hide two rows)
}

4. html {
-webkit-text-size-adjust:100%;
}

V. Processing of pictures and media

1,//use of fluid pictures
img{
width:100%;
Height:auto;
width:auto\9;
}

2. Audio elements and video elements cannot be played automatically in iOS and Andriod
Solution: Touch screen is broadcast
$ (' HTML '). One (' Touchstart ', function () {
Audio.play ()
})

3. How to prohibit saving or copying images
Usually when you press and hold the image img on your phone or pad, the option to store the image or copy the image will pop up, and if you don't want the user to do so, you can disable it in the following ways:
IMG {
-webkit-touch-callout:none;
}
PS: It is important to note that this method is only valid on IOS.

Vi. Processing of Shadows

1. How to clear the shadow in the input box on the mobile side
On iOS, the input box defaults to an inner shadow, but cannot be cleared using Box-shadow, which can be turned off if no shadow is needed:
Input,textarea {
border:0;
-webkit-appearance:none;
}

Seven, the processing of the font

For site font settings
1. Mobile Project:
Font-family:tahoma,arial,roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", sans-self;
2. Mobile and PC-side projects:
Font-family:tahoma,arial,roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", simsun,sans-self;

3, the font size as far as possible using PT or Em,rem, instead of PX.

4, set the size of input placeholder font::-webkit-input-placeholder{font-size:10pt;}

5, solve the font in the mobile side of the reduction of the problem of Sawtooth:-webkit-font-smoothing:antialiased;

Eight, round corner setting

Put a picture or a button, set the fillet will be more beautiful, set the value of the fillet can be used as a percentage, you can also use EM and other units.

element{
border:1px solid #ccc;
-moz-border-radius: percentage;
-webkit-border-radius: percentage;
Border-radius: percentage;
}

Nine, margin sag

1, Pixel border (example: the bottom border of the mobile side list)
. list-iteam:after{
Position:absolute;
left:0px;
right:0px;
Content: ";
height:1px;
Transform:scaley (0.5);
-moz-transform:scaley (0.5);
-webkit-transform:scaley (0.5);
}

2.

As in the case of PC-side development, one of the most noticeable problems in the development process is the margin collapse, where the typical problem is margin-top nesting, setting the Margin-top value on the child element, the position of the sub-element relative to the parent element unchanged, and the parent element moving down the response distance along with the child element. The principle can refer to my previous note CSS BFC Learning notes, solutions:

1. Set a padding value for the parent element DIV1

. div1{
height:500px;
width:100%;
Background: #ccc;
padding-top:1px;
}

2. Set a overflow:hidden for the parent element Div1; When Overflow:hidden is not added, the margin-top: This attribute is not recognized by the edge, that is, the failure. But IE browser solves this problem, Firefox, Google and so on will appear invalid, so this is a standard problem, is also a compatibility problem.

　. div1{

height:500px;
width:100%;
Background: #ccc;
Overflow:hidden;
}

X. Prohibition of content

1,//Prohibit text scaling
HTML {
-webkit-text-size-adjust:100%;
}

2. Disable selection on the mobile side
If you don't want the user to be able to select the content on the page, you can disable it in the CSS:
. user-select-none {
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
}
Compatible with ie6-9 notation: onselectstart= "return false;" unselectable= "on"

Xi. scrolling Effect

12. Quick Rebound

Fast rebound scrolling
. xxx {
Overflow:auto;
-webkit-overflow-scrolling:touch;
}
Ps:iscroll used to feel not very good, there are some strange bugs, here is recommended another Idangero Swiper, this plug-in integrates the powerful function of sliding screen scrolling (support 3D), but also has a rebound scrolling built-in scroll bar, the official address:
http://www.idangero.us/sliders/swiper/index.php

13. White background color collocation

14. Common mobile development framework and tools

Framework
1. Mobile-based framework
Zepto.js syntax is almost the same as jquery, and jquery will basically zepto~
Iscroll.js solve the page does not support elastic scrolling, does not support fixed problems ~ To achieve pull-down refresh, slide screen, zoom and other functions ~
Underscore.js The library provides a full set of functional programming functions, but does not extend any JavaScript built-in objects.
Fastclick speed up Mobile-click Response time
Animate.css CSS3 Animation Effect Gallery
Normalize.css Normalize.css is a modern, CSS reset for HTML5 ready for a premium alternative
2. Sliding screen Frame
Suitable for sliding screen on the slide screen, left and right slide screen to switch page effect
Slip.js
Islider.js
Fullpage.js
Swiper
3. Waterfall Flow Framework
Masonry
Tools recommended
Caniuse each browser supports HTML5 property query
Paletton Color Matching

The processing of the animation

Turn on hardware acceleration
Resolve page Flash White
Keep your animations flowing
. css {
-webkit-transform:translate3d (0, 0, 0);
-moz-transform:translate3d (0, 0, 0);
-ms-transform:translate3d (0, 0, 0);
Transform:translate3d (0, 0, 0);
}
Several elements of designing high-performance CSS3 animations
Use synthetic attributes transform and opacity as much as possible to design CSS3 animations,
Use position left and top to locate
Using Translate3d to turn on GPU acceleration

16. Eliminate Flicker

Eliminate Transition splash screen
. css{

-webkit-transform-style:preserve-3d;

-webkit-backface-visibility:hidden;
}

17. Remove touch highlighting from the mobile side
When you do the mobile page, you will find all a tags in the trigger click or all set Pseudo-class: Active elements, the default will be in the active state, the display of the Highlight box, if you do not want this highlight, then you can use the following CSS methods to suppress:
. xxx {
-webkit-tap-highlight-color:rgba (0, 0, 0, 0);
}

Web Mobile development Tips and Considerations Summary