Mobile reset, end reset

Mobile reset, end reset

*{
Margin: 0;
Padding: 0;
}
Article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
Display: block;
}
Html {
Font-size: 12px;
Color: #666;
Font-family: 'Microsoft yahei' 'helvetica Neue ', Helvetica, STHeiTi, Arial, sans-serif;
}
Body {
Height: 100%; overflow-x: hidden;-webkit-overflow-scrolling: touch;
}
Audio, canvas, progress, video {display: inline-block; vertical-align: baseline ;}
Img {
Border: none;
Vertical-align: middle;
}
A {
Text-decoration: none;
Outline: none;
/* Black highlight when the set tap A tag appears */
-Webkit-tap-highlight-color: transparent;
}
A: active {outline: 0 ;}
. Clearfix {
Zoom: 1;
}
. Clearfix: before,
. Clearfix: after {
Content :'';
Display: table;
}
. Clearfix: after {
Clear: both;
}
Em {
Font-style: normal;
}
Input {
Outline: none;
}
Input [type = "text"],
Input [type = "tel"] {
-Webkit-tap-highlight-color: rgba (0, 0, 0, 0 );
}
/* Remove the default button style for iphone and ipad devices */
Input [type = "button"], input [type = "submit"], input [type = "reset"] {
-Webkit-appearance: none;
Border-radius: 0;
}
Input:-webkit-outer-spin-button,
Input:-webkit-inner-spin-button {
-Webkit-appearance: none! Important;
Margin: 0;
}
Input:-moz-placeholder, textarea:-moz-placeholder {color: # cccccc ;}
Input:-ms-input-placeholder, textarea:-ms-input-placeholder {color: # cccccc ;}
Input:-webkit-input-placeholder, textarea:-webkit-input-placeholder {color: # cccccc ;}

/* Knowledge extension */
1.-webkit-tap-highlight-color
-Webkit-tap-highlight-color: rgba (,); // The transparency is set to 0. When you click a link or a text box object, the default gray translucent cover (iOS) or a dotted box (Android)
-Webkit-tap-highlight-color: rgba (0.5, 0, 50%); // you can use this attribute to highlight transparent red in the Link area of touch, it only works on ios. This attribute is displayed as a border on android. Add this attribute to the body to ensure that the click area of the body is consistent.

2. outline: none
(1) The purpose of defining this style for tag a on pc is to cancel the dotted line that appears when tag a is clicked in IE. Ie7 and the following browsers do not recognize this attribute. You need to add hidefocus = "true" to the tag"
(2) input, textarea {outline: none} cancels the default text box focus style in chrome.
(3) It does not work on the Mobile End. To remove the default style of the text box, you can use-webkit-appearance. When focusing, the default style is-webkit-tap-highlight-color. This attribute is added to some mobile reset files, which is redundant.

3.-webkit-appearance
-Webkit-appearance: none; // eliminates the native appearance of the input box and button. This attribute can be added to iOS to customize the style of the button and input box.
Different types of input use this attribute. Text and button have no style, and radio and checkbox disappear directly.
4.-webkit-user-select
-Webkit-user-select: none; // disable page text selection. This attribute is not inherited. Generally, the text of the entire body is not automatically adjusted when added to the body.
5.-webkit-text-size-adjust
-Webkit-text-size-adjust: none; // disable automatic text resizing (the text size changes when the device is rotated by default). This attribute is not inherited, generally, the text of the entire body is not automatically adjusted on the body.
6.-webkit-touch-callout
-Webkit-touch-callout: none; // the pop-up menu for disabling a long press page (valid for iOS). The img and a labels must be added.
7.-webkit-overflow-scrolling
-Webkit-overflow-scrolling: touch; // partial scrolling (only supported by iOS 5 or later)

1. Usage of <meta name = "format-detection"/>

When browsing on a mobile phone, this label is used to specify whether to display the mobile phone number in the webpage as a dial-up hyperlink.
On the iPhone, the default value is:
<Meta name = "format-detection" content = "telephone = yes"/>
If you do not want your mobile phone to automatically display the phone number on the webpage as a dialing hyperlink, you can write as follows:
<Meta name = "format-detection" content = "telephone = no"/>
2. <meta name = "apple-mobile-web-app-capable"/>
<Meta name = "apple-mobile-web-app-capable" content = "yes"/>
The function of apple-mobile-web-app-capable is to delete the default toolbar and menu bar of apple. Content has two values: "yes" and "no". When we need to display the toolbar and menu bar, this line of meta does not need to be added. The default value is display.
3. <meta name = "apple-mobile-web-app-status-bar-style"/> usage
The function is to control the display style of the status bar:
<Meta name = "apple-mobile-web-app-status-bar-style" content = "default"/>
<Meta name = "apple-mobile-web-app-status-bar-style" content = "black"/>
<Meta name = "apple-mobile-web-app-status-bar-style" content = "black-translucent"/>
Default: default; black: black; black-translucent: translucent gray