Mobile-side Problem summary sharing

1. Penetrate the problem.

Problem: Both IOS and Android phones appear;

When a layer is covered on the B layer, a layer of binding touchend or Touchstart events to shut themselves down, b layer is a tag element, then the user clicks on layer A, the a layer is closed and the page will be based on the B layer of a tag href to jump.

The magic is, to B-layer plus e.preventdefault () or stop the page jump, that is, there is no trigger on the B layer of the binding event, but still jump.

Resolution: First click on the sequence of element triggering events: Touchstart, Touchend, MouseDown, MouseUp, click

No Touchend events, with click or MouseDown or MouseUp events, but this may not be very good on the phone side

Bind a whole layer or an element to a Touchstart and E.preventdefault (), if this element is a, then you must use Location.href to jump, if it is the input box, you can not use E.preventdefault (), no You cannot enter any characters, so you have to add a judgment.

1. The stop problem for Animate

Problem: Mobile phone side because of using CSS3 animation, so Zepto.js no stop method.

WORKAROUND: I have customized the extension of a method, bash search $.fn.stop, currently supports animation 2d transform and top and left stop, does not support @keyframe and 3D.

1. Sound problems

Question: For iOS phones, if you want to make the sound of the results at the end of the game; Sometimes the sound goes into a dead loop when the Android phone is playing.

FIX: When the user clicks on the game "Start button", call the result sound of play () and then pause (), call the next sound of the load () method to stop or the load () method to play again.

1. Rem

Problem: To be able to cut 640 widths of pages as freely as the PC side

FIX: First agreed: For the 640px HTML root element definition font-size:100px, and then add the following code in the head of the page, then when an element is 10px, you just write 0.1rem, convenient and fast.

var fitpage = function () {

var w = $ (' html '). Width ();

w = w > 640? 640:w;

var neww = w/640 * 100;

$ (' HTML '). CSS ({

Fontsize:neww

});

}

Fitpage ();

5: Determine if it is a handheld device

Originally I was writing ' ontouchstart ' in window

Refer to the next JQuery mobile and change it to ' ontouchend ' in document

6: Upper and lower center of element

Before the table is used to center, the later found that its practical flex-box should be better, later will try to use.

7: still worrying about Disabling the button? Still writing a bunch of JS for sending SMS Captcha screen buttons ?

Only 2 attributes, all JS are floating clouds ~ ~ ~ See example:

<a href= "" style= "pointer-events:none;" disabled = "Disabled" ></a> (pointer-events:none; main solution some iOS incompatible Disabled)

Yes, it is so simple!!! Not only buttons, all kinds of magical, to experience it yourself ~

Mobile-side Problem summary sharing