About touch and web-side CSS instructions

What is the Viewport

手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽, So do not put each page pushed a small window (this will not undermine the page layout for optimized mobile browser), the user can pan and zoom to different parts of the point of view of the page. Mobile version of the Safari browser, the latest introduction of the viewport meta tag, allows web developers to control the viewport size and scale, other mobile browser also basic support.

Meta Tags

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

1. width - the width of the visible region, is a positive integer, or string "device-width"

2. height - height of the visible region, is a positive integer, or string "device-height"

3. initial-scale - initial scaling values ​​1.0 page display actual size, without any scaling

4. minimum-scale - allows a user to zoom to a minimum ratio, is a number that can be decimals

5. maximum-scale - allows the user to scale the maximum ratio, is a number, can decimals

6. user-scalable - whether the user can manually zoom, is "no" or "yes", no representatives are not allowed, yes to allow representatives

<meta content="telephone=no" name="format-detection" />
<meta content="email=no" name="format-detection" />

1. telephone- Digital conversion of whether dial-up link, is "no" or "yes", no representatives are not allowed, yes behalf permitted when set to no, <a href="tel:4006661166"></a>call

2. email- automatic identification of whether the mailbox, is "no" or "yes", no representatives allowed, for the allowed Yes, if set to no, if set to no, <a href="mailto:[email protected]?subject=Hello%20again">
   send messages

Gets the value of the scroll bar

window.scrollY  window.scrollX

You want to get a desktop browser scroll bar value is through document.scrollTopand document.scrollLeftget, android and IOS bywindow.scrollY window.scrollX

Prohibit copy and paste text

-webkit-user-select:none

Mobile end touch event

1. touchstart // trigger When a finger touches the screen

2. touchmove // When the finger has touched the screen starts to move the trigger

3. touchend // triggered when the finger leaves the screen

4. touchcancel// trigger some kind of touch when the event ends abnormally

Trigger order of these four events are:
touchstart -> touchmove -> touchend -> touchcancel

overflow property

overflow attribute specifies when 内容溢出元素框时things happen

1. visibleDefaults. Content will not be pruned, there will be elements outside the box.

2. hidden Content will be trimmed, and the remaining content is not visible.

3. scroll Content will be trimmed, but the browser will display the scroll bar to view the rest of the content.

4. auto If the content is pruned, the browser will display the scroll bar to view the rest of the content.

5. inherit Provision should inherit the value of the overflow property from the parent element.

Load the difference between the image and background-image

During the page load in to the picture background-image css background presence will wait until construction finished loading (content of the page display all later) began to load, and the tag img html is part of the web structure (content) will be in loading the loading process structure, in other words,网页会先加载标签img的内容，再加载背景图片background-image