Mobile summary and mobile compatibility issues

H5 page window automatically adjusts to 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)

Ignore numbers in a page as phone numbers

<meta name= "format-detection" content= "Telephone=no"/> (it's obvious that numbers are sometimes treated as phone numbers on iOS)

Ignore the recognition of email addresses in the Android platform

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

Viewport templates

<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" >

WebKit how the default appearance of form elements is reset

. Css{-webkit-appearance:none;} (the drop-down box on iOS will have rounded corners, so write border-radius:0)

The text is emptied when the input box has the focus and is emptied with value when you enter text in the input box 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 * *

}

There is a compatibility problem with the flex layout on your phone, and only the new version will appear when the Android phone is not recognized.

. 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 */

}

Compatibility resolution for input boxes

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 * *

}

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 */

}

WebKit the color value of the form input box placeholder

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

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

Multiple lines omitted on the phone

. 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*/

}

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) {}

<button></button> elements must be written on the type attribute or the form will be submitted by default, unexpected bug

Some Android phones have their own browser that does not recognize the onkeydown onkeypress onkeyup event, which results in the inability to enter Chinese characters

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

Mobile phone with the background map to write motion, if the need for background map positioning to achieve the motion 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.

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 ()

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

Apple phone fixed location has bug check HTML and body is not set up Overflow-x:hidden;

Mobile summary and mobile compatibility issues