Summary of basic knowledge tips for "dry" mobile

Last weekend, took over a mobile side (outsourcing) Small project, has been working on the PC side, on the mobile side or smattering, so this is also a challenge for me, so today, a whim, summed up some mobile basic knowledge and skills for their convenience later, welcome you to add or reprint:

I. Unit (PX,EM,REM)

1.PX: The screen device physically can show the smallest point, different devices on the length of the width, the proportion is not necessarily the same;

2.em/REM: The same point: All is a relative size value; different points:em is relative to the parent element,REM is relative HTML (default value depends on browser, chrome default is 16px);

REM units are prevalent in the development of mobile-side frontend. REM units do benefit quite a lot, it is relative to the root node, allowing us to unify the entire site unit. can also make our fonts better adaptive to the size of the site, but, you used to know, it will have a problem: When you use Chrome browser to open your website, sometimes there will be a large font situation. But it would be nice to refresh the page.

The reason for this is that we have modified the default 1rem=16px to 1rem=10px for ease of calculation, so we usually do the following in HTML:

html{    font-size:62.5%;/*10÷16x100=62.5%   1rem=10px*/}

However, the Chrome browser sometimes ignores the HTML settings, so when the page is initialized, there is a situation where the above font size is too large. Careful study will find that the appearance of the font is too large "element", usually not set font-size, the element's font-size is inherited root, so the solution is: in the text you want to show the parent or itself set font-size;

　　Two. Header information:

1.DOCTYPE (docment Type): This tag tells the browser document which HTML or XHTML specification to use, case-insensitive, HTML code:

<! DOCTYPE html><!--Use HTML5 DOCTYPE case-insensitive

2.lang: This property is placed in the

3.charser: Declare the document using the character encoding (GBK,UTF-8), HTML code:
<meta charset = "UTF-8" >
4.format-detection (recognition rule) →content parameter (default is YES):
Telephone: Digital conversion to dial-up link (yes/no)--no: Prohibit the conversion of digital to dial-up link, yes: Turn the number into a dial-up link;
Email: Identification Mailbox (yes/no)--no: Prohibited as an email address, yes: Open the text default to the email address;
Adress: Click the address to jump to the map--no: No jump to the map, yes: Turn on the click Address to jump to the map function;
<meta name= "format-detection" content= "Telephone=no,email=no, Adress=no"/>
5.viewport (for mobile devices) →content parameters:
　　　　Width:viewport, height:viewport (usually not set),Initial-scale: initial scale;Maximum-scale: maximum scale;  Minimum-scale: Minimum zoom ratio;user-scalable: Whether to allow zooming (yes/no)       
<meta name= "viewport" content= "width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0, User-scalable=no "/>
6.SEO Optimization:
Title (page title): <title>your title</title>
Keywords (page keywords): <meta name= "keywords" content= "your keywords"/>
Description (page description): <meta name= "description" content= "Your description"/>
Author (Web Author): <meta name= "Author" content= "author name"/>
Robots (Web search engine indexing method):robotterms is a set of values that are separated by commas (,), and are typically taken as values: 
None: Search engines will ignore this page, equivalent to Noindex,nofollow;
NOINDEX: The search engine does not index this page; Nofollow: Search engine does not continue through the link index of this page for other pages;
All: The search engine will index this page with a link to continue through this page, equivalent to index ,follow; 
　　　　　　Index: Search engine indexing this page; follow: Search engines continue to find other pages through the link index of this page;
<meta name= "Robots" content= "Index,follow"/><!--PS: If the page does not provide robots, the search engine thinks that the robots property of the page is all (index and follow- >
Three. Mobile-side development common compatibility:
　　1.h5 page window automatically adjusts to device width, prevents user scaling
<meta name= "viewport" content= "Width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=no" />
2. Ignore numbers in the page as phone numbers (iOS devices are easy to appear)
<meta name= "format-detection" content= "Telephone=no"/>
3. Ignore the identification of the email address in the page (Android device is easy to appear)
<meta name= "format-detection" content= "Email=no"/>
4. Pull the scroll bar up and down
body{    -webkit-overflow-scrolling:touch;    Overflow-scrolling:touch;}
5. Disable copying, select text
body{    -webkit-user-select:none;    -moz-user-select:none;    -khtml-user-select:none;    User-select:none;}
6. Press and hold the page for a long time to flash back
html{    -webkit-touch-callout:none;}
7. Ios/android Translucent gray matte when touching elements
html{    -webkit-tab-highlight-color:rgba (255,255,255,0);}
8. Pseudo-Class: active invalidation
Method One: <body ontouchstart= "" ><!--add Ontouchstart to Body
Method Two: JS to document binding Touchstart or Touchend event Document.addeventlistener (' Touchstart ', function () {},false);
9. Downgrade processing (CSS3)
if (' transition ' in Document.documentElement.style) {    console.log (' Support Transitioin ');} else{//here to downgrade processing, call different CSS    Console.log (' Do not support transition ');}
10. Adjust the font size when you rotate the screen
html,body,form,fieldset,p,div,h1,h2,h3,h4,h5,h6{    -webkit-text-size-adjust:100%;}
11. Some Android rounded corners fail
Background-clip:padding-box;
12.IOS Input Keyboard event support is not very good (through the HTML5 oninput to achieve a similar effect of KeyUp)
document.getElementById (' inputID '). AddEventListener (' input ', function (e) {    var e = e | | event;//browser compatibility handling    var Value = E.target.value;    Console.log (value);});
13. Eliminate the fork in IE
input:-ms-clear{    Display:none;}
Input box default inner shadow on iOS device
html{    -webkit-appearance:none;}
15.IOS Setting the input button style is overridden by the default style
input,textarea{    border:0;    -webkit-appearance:none;}
iOS keyboard letter input, default first letter capitalization
<input type= "text" autocapitalize= "Off"/>
The question of setting the input type to number:
17-1.maxlength attribute is not available: <input type= "number" oninput= "Checklength (this,5)"/>
function Checklength (obj,length) {    if (obj.value.length > Length) {    Obj.value = obj.value.substr (0,length);    }}
17-2. Set Step (default = 1): <input type= "number" step= "0.01"/>
17-3. Remove input Default Style
input[type=number]{    -moz-appearance:textfield;} Input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{    -webkit-appearance:none;    margin:0;}
Four. Mobile event (click-through):
　　1. Changes in the event:
Mouse events at the ①pc End (fail): MouseDown, MouseUp, MouseMove, MouseOver, Mouseout, MouseEnter, MouseLeave
② several primitive events instead of the click-click event (the Mobile Click event also exists, but there is a 200ms~300ms trigger delay problem):
touchstart→ touch start trigger, similar to MouseDown
touchmove→ touch points are triggered when moving on the screen, similar to MouseMove
When a touch point moves from one element to another on a mobile device, it does not trigger events like MouseOver, Mouseout, MouseEnter, MouseLeave, and so on as the PC side
touchend→ triggered at the end of touch, similar to MouseUp
touchcancel→ when a higher level thing happens, such as a sudden call in the game, triggers the Touchcancel event and saves the current game's state information at Touchcancel
③PC end a machine has only one mouse, and the mouse-related properties are placed on an event object;
Most mobile devices support multi-touch, an event may be related to multiple touch points, each touch point needs to record its own individual properties, touch-related properties are touchlist type, touch location, target element, all on the touch object;
touches→ a list of the fingers of the current screen; changedtouches→ the list of fingers that trigger the current event; targettouches→ the list of fingers on the current element;
Touch Object Main Properties:
clientx/clienty→ the position of the touch point relative to the browser window, the position of the pagex/pagey→ touch point relative to the page, and the position of the screenx/screeny→ touch point relative to the screen;
The id;target→ current DOM element of the Identifier→touch object, which is the first element that occurs for a touch event
　　　2.click Point-through event:
① What is the click-through: For example, existing a (top), B (down) two boxes overlap, box A has a bound Touchend event, event processing is hidden box A, box B has a binding click event, click on Box a once, It will also trigger the Click event to box B.
② point through the scene: A/b two elements layer up and down the z-axis overlap, the upper level of a element to disappear or move away, the lower level B element has a default click event (such as a tag), or the B element is bound to the Click event
③ Why there is a point: The Mobile Click event has a noticeable delay, the difference between Touchstart and click:
Touchstart: This dom (or bubbling to this DOM) can immediately trigger a finger touch at the beginning;
Click: this dom (or bubbling to this DOM) starts with a finger touch, and the finger never moves on the screen (some browsers allow a very small displacement value to be moved),
And the finger leaves the screen on this DOM, and the interval between touching and leaving the screen is shorter (some browsers do not detect the interval and trigger click) to trigger;
④ How to solve:
For cases where the B element itself does not have a default click event, you should use the touch event uniformly, unify the code style, and because the click event is much more delayed on the mobile side, which is not conducive to the user experience, so you should try to use touching events whenever possible.
For cases where the B element itself has a default click event, the default click event for the B element should be canceled in time to prevent the Click event from being generated, that is, the default action of the event should be canceled in the touch function:
if (E.type = = "Touchend") {    e.preventdefault ();//Cancel the default action of the event (if such an action exists)}
OK, the above is I from that small project to get some mobile end of the basic knowledge and skills, welcome you crossing reprint or supplement Oh!
Summary of basic knowledge tips for "dry" mobile