Mobile terminal compatibility problems

① Android browser to see the background image, some devices will be blurred because the phone's resolution is too small

Solution: 2X with pictures instead of the img tag and background-size: contain

② prevent phone page zoom in or out: Set in the meta viewport user-scalable = no in

Scroll down Caton on ③: overflow-scrolling: touch;

④ prohibited to copy the selected text: user-select: none;

⑤ long press page appears flash back: -webkit-touch-callout: none;

⑥ animation definition 3D hardware acceleration: transform: translate 3d (0,0,0);

⑦ formate-detection enable or disable the automatic identification page in the phone number, content = "yes / no"

⑧ a label is added tel dialing

⑨ Android phones fillet failure: background-clip: padding-box;

⑩ mobile terminal 300ms delay: fastclick

① inconsistent cross-normal bold font: text-size-adjust: 100%;

A. Css section

If body height: 100%; overflow: hidden is still sliding, if to be prohibited, is provided to add a layer of div height: 100% plus overflow: hidden (html, body add height: 100%), this element exceeds body height can not slip up.
Or simultaneously to html, body add height: 100%; overflow: hidden
meta tags

<meta name = "viewport" content = "width = device-width, initial-scale = 1, user-scalable = no" /> together with the movable end is the real tag adaptive, without it, if you a 980px width (conventional mobile terminal 980) of the PC web on the phone display, the idea is to show the scroll bar does not appear normal, but a mobile device optimized page made narrow, so the font and so the corresponding reduced (980px is with respect to the pixels of the phone, I was a little more than 1000px on the scroll bar appears, this did not specifically study).

About initial-scale = 1, the reference iphone5 size of 320 * 568, 640 * if you follow page 1136 to do so, scale it to 0.5
<meta content = "yes" name = "apple-mobile-web-app-capable"> IOS in safari allows full-screen browsing

<meta content = "black" name = "apple-mobile-web-app-status-bar-style "> IOS Safari in the status bar style top

<meta content =" telephone = no "name =" format-detection "> becomes the telephone number digits are ignored
<meta content="email=no" name="format-detection"> 忽略识别email
When do full screen images, usually for compatibility with most of the mobile phone, the picture size is generally set to 640 * 960 (I feel good this size, but also do a lot of picture is this size, as the case may be)
Removal of the scroll bar webkit

element::-webkit-scrollbar{

display: none;

}
Button to remove the default style on ios

-webkit-appearance: none;

border-radius: 0
Do not want to have a blue border -webkit-tap-highlight-color so that when the button touch: rgba (0,0,0,0);
If you want to navigation such as fixed, absolute can achieve the same effect, the body set at 100%; the element can be absolute to the body, but this does not allow body roll, if there is need to scroll the place, and laid them scroll div
In the mobile terminal to do animation, and if by changing the absolute positioning of the top, or the margin to do it, then the effect is very poor, very smooth, and the use of transition css3 effects or animation will be great (in this regard than the IOS android but also a lot better).
If translate3d to achieve animation, will open the GPU acceleration, hardware configuration Andrews with poor performance will consume them, to be used with caution (1st floor borrow comment)
When using the pictures, the next picture will find there is always a gap of about 4px, (said to be the reason the picture is inline, what triggered baseline ...) common solution has

img{display:block}；

img {vertical-align: top} several other values are also desirable, as the case may

Other solutions Seeing
Learn to use display: -webkit-box layout, well help us achieve adaptive page, such as the navigation bar these individuals feel particularly suitable for specific use is not described here
Use a label, then try to make a label block, try to let users maximize the clickable area
After two pages using a transform, z-index page will at times fail, I have met, but not to seriously explore, just like z-index increase, if you encounter this problem, details can see This
In iOS, when you click on such input ready for input, virtual keyboard pops up, it will become height of the entire window height minus the keyboard, your at the bottom of the fixed elements such btn, this element will run up, general It will not be too beautiful. I put it as the absolute, as the case may be, when the focus
Prevents users from selecting text -webkit-user-select: none
When you input is set to width: 100%, you may occasionally experience beyond the width of the input screen for input can then add a property box-sizing: border-box

About box-sizing: border-box, this property is the border aspect included in the aspect in the box, if you set when two elements float and 50-50, and has border, use this attribute can be perfect so that they can be displayed on the same line
To td after the table is provided with a width exceeding col partially hidden table, then to add the attribute table-layout: fixed (fixed width layout)
If you want to change the placeholder in the style, you need to use css pseudo-class. The :: - webkit-input-placeholder {color: #ccc}
For example to make a directional arrow ">", it is possible with a square div is provided border: 1px 1px 0 0; then rotate (45deg)
CSS weight: style is 1000, id is 100, class 10, such as ordinary li, div and pseudo-classes 1, is universal as * 0;
When using rem, set up a div such as the height: 3rem; line-height: 1.5rem; overflow: hidden; when, on some android phone display may appear more than two lines, the third line displays nod department. Solution: use js go get text line-height setting div height

Two. JS part

If you use jquery bind touch event, then get touchstart, contact coordinates touchmove with e.originalEvent.targetTouches [0] .pageX, then get touchend with e.originalEvent.changedTouches [0] .pageX
Gets rotate value obtained using the style of transform

parseInt(/rotateX\((.*?)\)/.exec(getALL.style.webkitTransform)[1])

If the page is not the beginning of a style value, rotate is written in CSS, the need to use getComputedStyle, specific look here .
Some versions of the iphone4, audio and video events will not trigger the default player, such as the use window.onload to trigger or timer and so can not play, you must write the event with JS allows the user to manually click on the trigger starts playing
Want touchmove: function (e, a parameter) was added a parameter, the results directly e.preventDefault () will be given e, for the treatment

touchmove: function (e, a parameter) {
　　var e = arguments [0]
e.preventDefault()
}
HTML5 new js API have a new selector, such as querySelector ( ". Class #id") and querySelectorAll ( ". Class element").
When you click an element, use touchstart will trigger immediately, and then use click with delay of about 0.3s
With e.preventDefault () will prevent the scroll, click and other events

H5 Page window to automatically adjust the width of the device and prevents users zoom page

(Later part of the UC browser Android phones can still finish zoom)

Ignore the digital identification page for the phone number

<Meta name = "format-detection" content = "telephone = no" /> (sometimes significantly as a digital phone number would iOS)

Ignore the Android platform in the recognition of email address

viewport template

<Meta content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no" name = "viewport"> // I was mainly to force the width of the document holding a device width : 1, the maximum width of 1.0 to prohibit screen zoom.

<Meta content = "yes" name = "apple-mobile-web-app-capable"> // This is the iphone private label, allowing full-screen browsing.

<Meta content = "black" name = "apple-mobile-web-app-status-bar-style"> // iphone private tag, iphone top status bar style.

<Meta content = "telephone = no" name = "format-detection"> // disable the digital automatically recognized as a telephone number, this is useful, because a string of numbers will be displayed as blue on iphone, addition of another color pattern it is not in force.

The default appearance webkit form elements of how to reset

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

Has the focus in the text input box is cleared by the value input box is cleared when entering text with placeholder

webkit form input box placeholder text can wrap it? ios can, android not ~, in textarea label can wrap ~

html,body{

overflow: hidden; / * Write the phone overflow-x: hidden; there will be compatibility issues, if the child if there is absolute positioning system, then ios7 movement off the screen appears blank * /

-webkit-overflow-scrolling: touch; / * smooth scrolling, there will be a decline in slippery situation does not move under ios7, it is necessary to write * /

position: realtive; / * If the child is directly absolute positioning, then there is movement to the outside of the screen will appear blank * /

}

There will be compatibility problems with the layout of flex on the phone, only with a new version of the Android phones will not recognize the phenomenon

.box{

display: -webkit-box; / * older syntax: Safari, iOS, Android browser, older WebKit browsers * /.

display: -moz-box; / * older syntax: Firefox (buggy) * /

display: -ms-flexbox; / * mixed version Syntax: IE 10 * /

display: -webkit-flex; / * the new version syntax: Chrome 21+ * /

display: flex; / * the 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; / * address compatibility issues * /

}

Input box to solve compatibility

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; / * line-height on the phone can not be written and the value of the same height, the cursor will appear again rely on the input of 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); / * resolved to join js input box to enter the instant whitening phenomenon * /

}

Disable radio and checkbox default style

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

display: none; / * this class can use custom styles * /

}

Webkit color values form inputs of the placeholder

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

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

Multi-line omission 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; / * few lines occurs ellipsis * /

/ * Text-align: justify; not write together and overflow hidden code, there will be bug * /

}

Text label line-height: 1 line-height or a height equal to the text will be cut

Floats on the phone try to write to write wide width otherwise it is prone to compatibility problems, try not to write high, because the number is not fixed content

To the different screen sizes of mobile phone set special style

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

<Button> </ button> element must write the type attribute or will default form is submitted, unexpected bug occurs

Some Android phone comes with a browser does not recognize onkeydown onkeypress onkeyup events that will lead to not enter Chinese characters

If do not want to enter text input box can only be read but not write can add readonly property

Write a background motion on the phone, if required to effect movement of positioning background effects can be calculated by adding rem basckground-size: * 100% FIG number 0;

The best plus top left background write 00 or otherwise prone to jump when written motion effects

Off event easily trigger bombs layer after layer of closed shells the next level event so give elastic layer off event plus event.preventDefault ()

After playing the layer pop-up screen scrolling is not allowed to add elastic layer mousemove event event.preventDefault ()

If you follow the breadcrumbs to bootstrap li add: after pseudo-elements, then in other browsers and performance in the UC browser is not the same, the UC will be wider than other browsers, the position occupied more

If you see a cell phone and other phones are not the same will be larger or smaller than the other phone to see his browser font settings are normal, he should be transferred to the phone browser font size smaller or turn up the (so-called deceptive bug)

IOS phone if there is an element of very high levels may still be covered by the other elements, then the elements and other elements at the same level