[Dry goods] basic knowledge and skills of mobile terminals, basic knowledge of dry goods

[Dry goods] basic knowledge and skills of mobile terminals, basic knowledge of dry goods

Last weekend, I took over a small mobile terminal (outsourcing) project and started to work on the PC end. I still have some knowledge about the mobile end, so this is also a challenge for me. Therefore, today, I am thrilled to summarize some basic mobile knowledge and skills for your convenience. You are welcome to add or repost them:

1. Unit (px, em, rem)

1. px: The smallest point physically displayed on the screen device. The length and width of the points on different devices are not necessarily the same;

2. em/rem: Same point: both values are relative values. Difference: em is relative parent element and rem is relative html (the default value is browser, and Chrome is 16 PX by default );

Rem units are very popular in Mobile front-end development. The rem unit does have a lot of benefits. It is relative to the root node, so that the entire website unit can be unified. We can also make our fonts better adapt to the size of the website, but once you use it, you will know that it will have a problem: when you open your website in Chrome browser, sometimes a large font may occur. But refresh the page.

The reason for this is that we changed the default 1rem = 16px to 1rem = 10px for ease of computing. Therefore, we usually made the following settings in html:

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

However, Chrome sometimes ignores the html settings, so when initializing the page, the above font is too large. After careful research, we can find that "elements" with a large font are usually not configured with font-size. The font-size of an element inherits the root directory. Therefore, the solution is: set font-size on the parent level of the text you want to display or its own;

　　Ii. header information:

1. DOCTYPE (Docment Type): This tag tells the browser document which html or xhtml specifications are used and is case-insensitive. the HTML code:

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

2. lang: This attribute is placed in the

3. charser: declare the character encoding used by the document (GBK, UTF-8), HTML code:
<meta charset ="UTF-8">
4. format-detection (recognition rule) → content parameter (yes by default ):
Telephone: convert a number to a dialing Link (yes/no) -- no: Do not convert a number to a dialing link; yes: Enable to convert a number to a dialing link;
Email: Recognize email (yes/no) -- no: do not act as email address; yes: Enable to set the text to the email address by default;
Adress: Click the address to jump to the map -- no: Do not jump to the map, yes: Enable 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 parameter:
Width: viewport width; height: viewport height (usually not set); initial-scale: initial scaling ratio; maximum-scale: maximum scaling ratio; minimum-scale: minimum scaling ratio; user-scalable: whether to allow scaling (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: <title> your title </title>
Keywords: <meta name = "keywords" content = "your keywords"/>
Description (page description): <meta name = "description" content = "your description"/>
Author: <meta name = "author" content = "author name"/>
Robots (Web search engine indexing method): robotterms is a group of values separated by commas (,). The common values are as follows:
None: The Search Engine ignores this webpage, which is equivalent to noindex and nofollow;
Noindex: the search engine does not index this webpage; nofollow: the search engine does not continue to index other webpages through the link of this webpage;
All: The search engine indexes the web page and continues to use the link index of this web page, which is equivalent to index and follow;
Index: the search engine indexes this webpage; follow: the search engine continues to search other webpages through the link index of this webpage;
<Meta name = "robots" content = "index, follow"/> <! -- Ps: if the web page does not provide robots, the search engine determines that the robots attribute of the web page is all (index and follow -->
Iii. Mobile development common compatibility:
　　1. The H5 page window is automatically adjusted to the device width to Disable User scaling.

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=no"/>
2. Ignore recognizing numbers on the page as phone numbers (ios devices are prone to appear)
<meta name="format-detection" content="telephone=no"/>
3. Ignore the recognition of email addresses on the page (android devices are easy to recognize)
<meta name="format-detection" content="email=no"/>
4. Choppy when the scroll bar is pulled up or down
body{    -webkit-overflow-scrolling:touch;    overflow-scrolling:touch;}　
5. Prohibit copying. Select the text
body{    -webkit-user-select:none;    -moz-user-select:none;    -khtml-user-select:none;    user-select:none;}
6. After a long press, the page will crash.
html{    -webkit-touch-callout:none;}
7. A translucent gray mask appears when IOS/Android touch elements
html{    -webkit-tab-highlight-color:rgba(255,255,255,0);}
8. pseudo class: active failure
Method 1: <body ontouchstart = ""> <! -- Add ontouchstart to the body -->
Method 2: js binds touchstart or touchend event document. addEventListener ('touchstart', function () {}, false) to the document );
9. Downgrade (CSS3)
If ('transition 'in document.doc umentElement. style) {console. log ('transitioin' supported);} else {// here for degradation, calling different CSS consoles. log ('transition not supported ');}
10. Adjust the font size when rotating the screen
html,body,form,fieldset,p,div,h1,h2,h3,h4,h5,h6{    -webkit-text-size-adjust:100%;}
11. Some Android rounded corners are invalid.
background-clip:padding-box;
12. The input Keyboard event support in IOS is not very good (the keyup effect is achieved through the oninput of html5)
Document. getElementById ('putid '). addEventListener ('input', function (e) {var e = e | event; // browser compatibility processing var value = e.tar get. value; console. log (value );});
13. Eliminate the cross in IE
input:-ms-clear{    display:none;}
14. Default inner shadow in the input box on IOS devices
html{    -webkit-appearance:none;}
15. The input button style set for IOS will be overwritten by the default Style
input,textarea{    border:0;    -webkit-appearance:none;}
16. Enter letters on the IOS keyboard. The default letter is uppercase.
<input type="text" autocapitalize="off"/>
17. Question about setting the input type to number:
17-1.maxlength attribute is not used: <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 (1 by default): <input type = "number" step = "0.01"/>
17-3. Remove the default input 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;}
4. Mobile events (click through ):
　　1. event changes:
① PC mouse events (invalid): mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave
② Several original events replace the click Event (the mobile terminal click event also exists, but there will be a ms ~ Ms trigger latency problem ):
Touchstart → triggered when the touch starts, similar to mousedown
Touchmove → triggered when the touch point moves on the screen, similar to mousemove
On a mobile device, when a touch point is moved from one element to another, events such as mouseover, mouseout, mouseenter, and mouseleave are not triggered like PCs.
Touchend → triggered when the touch ends, similar to mouseup
Touchcancel → more advanced events are triggered when a call occurs. For example, when a call occurs in a game, the touchcancel event is triggered and the status information of the current game is saved during touchcancel.
③ One PC machine has only one mouse, and all the properties related to the mouse are placed on an event object;
Most mobile devices support multi-touch. An event may be related to multiple touch points. Each touch point must record its own properties. All touch-related properties are of the TouchList type, touch position and target elements are all placed on the touch object;
Touches → finger list on the current screen; changedTouches → finger list that triggers the current event; targetTouches → finger list on the current element;
Main Properties of the touch object:
ClientX/clientY → the position of the touch point relative to the browser window; pageX/pageY → the position of the touch point relative to the page; screenX/screenY → the position of the touch point relative to the screen;
Identifier → touch Object ID; target → current DOM element. This attribute is the first element that occurs in a touch event.
　　　2. click a point-through event:
①What is click point transparent? For example, there are two existing boxes, A (top) and B (bottom), which are arranged in overlapping order. Box A has A touchend event bound, and the event is processed as A hidden box, A click event is bound to Box B. Clicking box A once triggers the click event of Box B.
② Point-through scenario: the upper and lower Z axes of the/B element layers overlap, and the upper A element disappears or is removed after being clicked, the lower-layer B element has a default click Event (such as a tag), or the B element is bound with a click event.
③ Why does the click event have obvious latency? The difference between touchstart and click is as follows:
Touchstart: This DOM (or bubble to this DOM) can be triggered immediately after the finger is touched;
Click: This DOM (or bubble to this DOM) starts with a finger touch, and the finger has not been moved on the screen (Some browsers allow moving a very small shift value ),
In this DOM, the finger leaves the screen, and the interval between the touch and the exit screen is short (Some browsers do not detect the interval, also trigger the click) to trigger;
④ How to solve:
When Element B does not have a default click Event, touch events should be used in a unified manner and the code style should be consistent. The latency of click events on mobile terminals is much larger, which is not conducive to user experience, therefore, touch-related events should be used whenever possible;
If Element B has a default click Event, the default click Event of Element B should be canceled in time to prevent the occurrence of the click event. 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 )}
Okay. The above are some basic mobile knowledge and skills I have obtained from that small project. You are welcome to repost or add them!
 
Author: Yun kiss, wavelet Source: Yun.