Mobile-side partial compatibility issues

1, H5 page window automatically adjusts to the device width, and prevents users from zooming the page
<meta name= "viewport" content= "width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0, User-scalable=no "/>

(The UC browser of some Android phones can be zoomed out after writing)

2. the number in the page is recognized as the phone number.
<meta name= "format-detection" content= "Telephone=no"/> (it's obvious that numbers are sometimes treated as phone numbers on iOS)

3. Ignore the recognition of email address in Android platform
<meta name= "format-detection" content= "Email=no"/>

4. Viewport template
<meta charset= "Utf-8" >

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

<meta content= "yes" name= "apple-mobile-web-app-capable" >

<meta content= "Black" name= "Apple-mobile-web-app-status-bar-style" >

<meta content= "Telephone=no" name= "Format-detection" >

<meta content= "Email=no" name= "Format-detection" >

5. How to reset the default appearance of WebKit form elements
. Css{-webkit-appearance:none;} (the drop-down box on iOS will have rounded corners, so write border-radius:0)

6. When the input box gets focus, the text is emptied with value in the input box when the text is emptied with placeholder

WebKit form Input Box placeholder The text can be changed line? iOS can, Android no ~, under the textarea tag can be changed line ~

html,body{

overflow:hidden;/* Mobile Phone Write Overflow-x:hidden, there will be compatibility issues, if the child if the absolute positioning has a motion to the screen, iOS7 system will appear white * * *

-webkit-overflow-scrolling:touch;/* smooth Scrolling, there will be a sliding ios7 under the situation, so need to write on the * *

position:realtive;/* Direct sub-level if the absolute positioning has the movement to the screen, will appear to leave white * *

}

7, the mobile phone on the flex layout will have compatibility issues, only with the new version of the Android phone will appear not recognized phenomenon

. box{

Display:-webkit-box; /* old version syntax: Safari, IOS, Android Browser, older WebKit browsers. */

Display:-moz-box; /* old version syntax: Firefox (Buggy) */

Display:-ms-flexbox; /* Mixed version syntax: IE 10 */

Display:-webkit-flex; /* New version syntax: Chrome 21+ */

Display:flex; /* New version syntax: Opera 12.1, Firefox 22+ */

}

. box>li{

-webkit-box-flex:1.0;

box-flex:1.0;

-webkit-flex:1.0;

Flex:1;

width:0;/* Resolving compatibility issues */

}

8, the input box compatibility resolution

Input[type= "Text"],

Input[type= "Date"],

Input[type= "Tel"],

Input[type= "Email"],

input[type= "Password"]{

-webkit-appearance:none;

Display:block;

width:100%;

Height:0.8rem;

line-height:normal;/* mobile phone line-height can not be written as the height of the value, will appear again input cursor on the phenomenon */

Background:none;

Font-size:0.32rem;

Padding-left:0.28rem;

border-radius:0;

-webkit-border-radius:0;

border:1px solid #d5d5d5;

-moz-box-sizing:border-box;

-webkit-box-sizing:border-box;

Box-sizing:border-box;

Outline:none;

-webkit-transform:translatez (0);

-moz-transform:translatez (0);

-ms-transform:translatez (0);

-o-transform:translatez (0);

Transform:translatez (0);/* Resolve add JS after input box to enter the instant white phenomenon * *

}

9. Disable radio and checkbox default styles

Input[type= "Radio"]::-ms-check,input[type= "checkbox"]::-ms-check{

display:none;/* so you can customize the style with class */

}

10, WebKit the color value of the form input box placeholder

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

Input:focus::-webkit-input-placeholder{color: #999;}

11, multiple lines on the phone omitted

. overflow-hidden{

Display:box!important;

Display:-webkit-box!important;

Overflow:hidden;

Text-overflow:ellipsis;

-webkit-box-orient:vertical;

-webkit-line-clamp:4;/* the first few lines appear ellipsis */

/*text-align:justify can not be written with overflow hidden code, there will be bug*/

}

12, text label line-height:1 or line-height equals height text will be cut off

Mobile phone on the floating elements can write wide as far as possible to write wide or easy to appear compatibility issues, try not to write high, because the content of how much is not fixed

Set special styles for phones of different screen sizes

@media only screen and (min-device-width:320px) and (max-device-width:375px) {}

13, <button></button> elements must be written on the type attribute or default submission form, unexpected bug

14, some of the Android phone's own browser does not recognize the onkeydown onkeypress onkeyup event, these events will cause the Chinese characters can not be entered

15, input box if you do not want to input text can only be read and cannot write add ReadOnly property

16, the mobile phone with the background map to write movement

　　If you need the background map positioning to achieve the motion effect can be calculated with REM and basckground-size: The number of graphs *100% 0;

It is best to add a top left or 0 0 when writing a background image or it is easy to jump when writing a motion effect.

17. The closing event of the projectile layer

　　The close event of a projectile can easily trigger the next layer of events after the layer is closed, so add event.preventdefault () to the layer closure event.

The pop-up does not allow the screen to scroll to add MouseMove event Event.preventdefault ()

18. Breadcrumb Navigation

Breadcrumb navigation If you follow bootstrap to Li Plus: after pseudo-elements in other browsers and in the UC browser behave differently, UC will be wider than other browsers, occupy more locations

If a mobile phone is not the same as other mobile phones will be larger or smaller than other phones, to see if his browser font settings are normal, it should be his mobile phone browsing size is small or big (deceptive so-called bug)

If the level of an element appears to be very high in an iOS phone or is obscured by another element, then the element is sibling to another element

19, Apple mobile fixed location has a bug check HTML and body is not set up Overflow-x:hidden;

Mobile-side partial compatibility issues