HTML5 technical tutorials frequently occurring compatibility issues on the mobile side

Frequently-used compatibility issues on mobile 1. Android browser look at the background image, some devices will blur

Because the cell phone resolution is too small, if the resolution to display the page, the word will be very small, Android phone Devicepixoradio is more chaotic, there are 1.5, there are 2 also have 3. To make the image appear clearer on your phone, you must use the 2x background image instead of the IMG tag (typically twice times), or specify Background-size:contain;

2. Prevent the page in the phone from zooming in and out 3. Lag, slow when pulling scroll bar up and down
Bodytouch; Overflowtouch; }

The new properties of android3+ and iosi5+ support CSS3 are overflow-scrolling

4. Press and hold the page for a long time to flash back
Elementnone; }

5.iphone and ipad input box default inner shadow
Elementnone;; }

Translucent gray matte on 6.ios and touch elements under Android
Element (); }

Set the alpha value to 0 to remove this transparent gray matte, note: The Transparent property value is not valid under Android.

7.active compatible processing is pseudo class: active invalidation
Method One: Body add Ontouchstart

Method Two: JS to document BIND Touchstart or Touchend event

<style> A#a#fffscript () {},false); ) </script>

8.1px border
In the mobile side, if the element is set to a pixel border, then on the phone will look more than a pixel thick.

Workaround: Use pseudo-class elements to simulate borders, use transform to zoom

. Block1px#absolute (0.5)}

9.webkit Mask compatible processing
Some low-end phones do not support css3mask and can opt-in downgrade processing
For example, you can use JS judgment to refer to different classes:

. Documentelement.style) {alert (' Support mask ') (' Mask not supported ')}

10. Rotate screen Yes, font sizing problem
Html

11.transiton splash Screen
Webkit-backface-visibility:hidden;

12. Fillet bug
Some Android phone rounded corners fail background-clip:padding-box;

300ms latency problem with 13.click
On the mobile side, the Click event is in effect, but there will be a delay response of 300ms after the click

Reason: Safari is the first to make this mechanism, because in the mobile side, the browser will have to wait a period of time to determine whether this user action is a click or double-clicking, so there is a click300ms delay mechanism, Android will soon have

Use a custom event tap without click

Tap is required to be customized: If the user executes the Touchstart in a short time and then triggers the touchend, and two times the distance is very small, and cannot
Introduce Fastclick library to solve

14. Responsive images
In the mobile side, the image processing should be very cautious, assuming that the size of a picture itself is x width, set and wrap its div as wide, if the div width is less than the width of the picture, but if the div width is greater than the width of the picture, the picture is stretched distorted

This article turns from: H5 Cattle cow platform Source building www.yasewl.com

Workaround: Make the picture the largest can be its own width
img{Maxblockauto;}

15. The generation of bug
For example:

Nod Event Test

The DIV is an absolutely positioned mask, and Z-index is higher than a. A tag is a link in the page where we bind the tap event to the DIV:

())

The div normally disappears when we click on the mask, but when we click on the mask on the a tag, we find that a link is triggered, which is called a point-through event.

Reason:
Touchstart earlier than touchend earlier than click. That is, the Click Trigger is delayed by about 300ms, which means that the mask is hidden after the tap is triggered. At this point, click has not triggered, after 300ms due to mask hidden, our click triggered to the following a link.

Solve:

1. Use the touch event as much as possible to replace the Click event. For example with Touchend event (recommended)
2. Use Fastclick
3. Use Preventdefault to block the click of a tag
4. Delay certain events (300ms+) to handle events (not recommended)

HTML5 technical tutorials frequently occurring compatibility issues on the mobile side