HTML and CSS on the mobile side and PC-side need to pay attention to matters

One of the most important dimensions between mobile and PC is the size of Apple and Android, and a size that affects the user's experience. So let's take a look at some common solutions.

Usually in the Web page there are some such code in the head

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

1) First name= "viewport" declaration of the viewport, that is, the mobile video window of a declaration and <meta charset> is a truth, but not adding attributes is equal to no effect.

2) content= "width=device-width,//The width of the application is the same as the width of the screen

3) initial-scale=1.0//scale at application startup (1.0 means no scaling)

4) maximum-scale=1.0//user can zoom to maximum scale (1.0 means no scaling)

5) minimum-scale=1.0//user can zoom to the minimum scale (1.0 means no scaling)

6) user-scalable= "No"//whether the user can use his gestures to scale the entire application, so that the scale of the program changes (yes/no)

-webkit-touch-callout:none;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
User-select:none;
-webkit-tap-highlight-color:rgba (0,0,0,0);

User-select:value This is a new feature in the CSS3 UI specification that controls the optional property values for the content: User-select:auto default value, which allows the user to select the contents of the element.　　　　　　None the user cannot select any content in the element.　　　　　The text user can select the elements. The element text is optional, but within the bounds of the permission element (only IE and FF support) All is in the editor, and if the double-click/Context Click occurs on the child element, the most advanced ancestor element of the change value will be selected.　　-webkit-user-select:none; This is part of the browser private properties, such as-webkit-for Chrome (Google browser) and Safari (iphone browser) private properties, after the setting is complete, so that the browser can not select any content in the element by default
-moz-user-select:none; -moz-is the private property of Firefox browser
-ms-user-select:none;　　　  -ms-represents the private property of IE browser-o-user-select:none; -o-representative (opera) Open gate browser private properties-webkit-tap-highlight-color:rgba (0,0,0,0); Tap Finger click on the screen action, highlight highlight meaning, color: rgba (color and transparency) (0,0,0,0) first three bit 1 is black meaning color can set itself, the last 0 is the meaning of transparency

Things to note about the mobile and PC side of HTML and CSS