Mobile Web front-end development resource integration

Meta-Related:

<meta name= "viewport" content= "Width=device-width,initial-scale=1.0,user-scalable=no"/><meta name= " Format-detection "content=" Telephone=no "/><meta name=" format-detection "content=" Email=no "/>

CSS Related:

-webkit-overflow-scrolling:touch, fast scrolling and rebound results, and the efficiency of the native app seems to have a spell. -webkit-overflow-scrolling creates a system-level control with hardware acceleration, so it's very efficient. But this is relatively more memory-intensive, preferably when a very large area of overflow is produced.

Mobile-side fonts

Body {font-family: "Helvetica Neue", Helvetica, Stheiti, Sans-serif;/* Use sans serif fonts */}

　禁止长按链接与图片弹出菜单

A, img {-webkit-touch-callout:none;}

To prevent click Highlighting, you can add a label or body,html by

-webkit-tap-highlight-color:transparent;

-webkit-appearance property to change the browser default style for any element

Appearance:none|normal|icon|window|button|menu|field;

去掉webkit默认的表单样式

Button,input,optgroup,select,textarea {-webkit-appearance:none;}

禁止选中文本

-webkit-user-select:none;

Remove the blue outer border and gray translucent background when a, input, and button are clicked

A,button,input,optgroup,select,textarea {-webkit-tap-highlight-color:rgba (0,0,0,0);}

Modify the Planceholder style of input

Input::-webkit-input-placeholder {color: #ccc;}

Modify the style of the form when it gets focus

Input[type=text]:focus, Input[type=password]:focus {border:2px solid#f00;outline:none;}

Using CSS to implement ellipsis text truncation

White-space:nowrap;text-overflow:ellipsis;

Mobile Web front-end development resource integration