H5 some things to note on the mobile side of the page

H5 page can not be full screen adaptive window on the mobile side, how to do?

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

How should the H5 page be set on the mobile font?

1. IOS system

The default Chinese font is Heiti SC

The default English font is Helvetica

The default digital font is Helveticaneue

No Microsoft Ya-Black font

2.Android system

The default Chinese font is Droidsansfallback

The default English and digital fonts are droid Sans

No Microsoft Ya-Black font

3.Winphone system

Default Chinese font is Dengxian (founder and other line body)

The default English and digital fonts are Segoe

No Microsoft Ya-Black font

Each phone system has its own default font, and does not support Microsoft Black, if no special needs, mobile phone without the definition of Chinese fonts, the use of the system default English fonts and digital fonts can use Helvetica, three systems are supported.

Font-family:helvetica;

Click on the link to make a phone call, how to do?

<a href= "tel:136****5546" > Customer service Phone </a>

Click on the link to send a text message, how to do?

<a href= "sms:136****5546" > Mi-Goo Read customer service SMS </a>

What do I do if the number on the H5 page doesn't want to be identified?

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

H5 page want to ignore the Android platform to recognize the email address, how to do?

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

Do not want to display the WebKit scroll bar, how to do?

element::-webkit-scrollbar{Display:none;}

H5 the content of the page want to be selected, how to do?

-webkit-user-select:none;user-select:none;

H5 page want to prohibit long press the link or long press the picture after the pop-up menu, what to do?

-webkit-touch-callout:none;

Do you want to cancel The default style on the Button, input on iOS?

-webkit-appearance:none;

What do I do when I want to H5 the page touch without a blue border and mask on Android?

-webkit-tap-highlight-color:rgba (0,0,0,0);

How do you do if you have more than one picture placed together and don't want to have a 4PX gap?

Img{display:block};

Img{float:left};

Img{vertical-align:top}

What if I want to change the style of the placeholder attribute in input?

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

H5 page input type= "num" When you want to remove the right up and down arrows, what to do?

Input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none!important; margin:0;}

H5 page loaded picture is too big, how to do?

JPG images with Jpegmini compression, PNG can be compressed online with http://tinypng.org/

What do I do when I don't want to capitalize the initial letter on my iOS system?

<input type= "text" autocapitalize= "Off"/>

What to do if keyboard input turns off auto-fix in iOS system?

<input type= "text" autocorrect= "Off"/>

Screen rotation horizontal screen vertical screen switch, you want to suppress text scaling, how to do?

-webkit-text-size-adjust:100%;

H5 page want to have a quick rebound scrolling effect, how to do?

Overflow:auto; /* Auto | Scroll * *

-webkit-overflow-scrolling:touch;

What if I want to support different events when the screen is rotated horizontally screen vertical screen switch?

Event

Window.orientation, value: Plus or minus 90 indicates that the horizontal screen mode, 0 and 180 are displayed as vertical screen mode;

Window.onorientationchange = function () {

Switch (window.orientation) {

CASE-90:

Case 90:

Alert ("Horizontal screen:" + window.orientation);

Case 0:

Case 180:

Alert ("Vertical screen:" + window.orientation);

Break

}

}

Style

Style used when vertical screen

@media all and (orientation:portrait) {

. css{}

}

Styles used when traversing a screen

@media all and (Orientation:landscape) {

. css{}

}

What do I do if I don't want to display the voice input button on Android?

Input::-webkit-input-speech-button {Display:none}

Want to develop H5 shake function, how to do?

HTML5 Devicemotion: The event of moving sensor data is encapsulated, which can get the motion acceleration of mobile phone.

Https://github.com/FrontEndRoad/HTML5-FAQ

H5 some things to note on the mobile side of the page