Mobile-side compatibility issues solution

1. Latency response for iOS mobile Click event 300ms

Web pages on mobile devices are 300ms delayed, and playing can cause button click Delay or even click Invalidation. This is due to the historical reasons for differentiating between click events and double-clicking screen scaling.

In 2007, Apple released the first iphone on the iOS system with safari in order to apply to the PC-side of the large screen can be better displayed on the mobile phone, using double-click Zoom (double tap to zoom) scheme, such as you on the phone with a browser to open a Web page on a PC , you may see the page content although can fill the entire screen, but the font, pictures are very underestimated, at this time you can quickly double-click on a part of the screen, you can see the part of the enlarged content, double-click to return to the original state.

Double-click Zoom refers to a quick click on the screen with your finger two times, and IOS comes with a Safari browser that zooms the page to its original scale.

The reason for this is how the browser needs to determine the quick click, when the user clicks an element on the screen, such as a jump link <a href= "#" ></a>, where the browser captures the click First, However, the browser can not determine whether the user is simply to click on the link or double-click on the area to zoom, so, after capturing the first click, the browser will hold a period of time t, if the user does not make the next click in the t time interval, then the browser will do a click Jump link processing, If the user makes a second click in the T-time, the browser disables the jump and instead zooms in on that portion of the area's page. So how much does this time interval t have? Under iOS Safari, it's about 300 milliseconds. This is the origin of the delay. The consequences of the user simply click on the page, the page takes a while to respond, give the user a sense of slow experience, for the web Developer, the page JS capture Click event callback function processing, requires 300ms before it takes effect, also indirectly lead to affect the processing of other business logic.

Solution:

• Fastclick can resolve 300ms latency of click events on the phone
• Zepto's Touch module, the Tap event is also designed to address latency issues in the Click
• The response order of touch events is touchstart----touchmove-----you can also speed up response to events by binding Ontouchstart events, resolving 300ms latency issues
  

2. In some cases, for non-clickable elements such as (Label,span) monitoring the Click event, iOS will not be triggered, the CSS added cursor:pointer is done. 3. The input, select, A and other elements under the Samsung phone mask layer can be clicked and focus (click through)

The problem is found in Samsung phones, which are only available under certain requirements, so if there are no similar problems, you can not look at them. The first requirement is the floating layer operation, the element that is masked on Samsung can still get focus, click, change), there are two kinds of solutions,

1. It is through layer display to add the corresponding class name control, truncated below the display layer can get the focus element of the event acquisition

2. It is by adding the disabled attribute to the focusable element, or by using the attribute plus DOM Lock (a transformation of disabled)

4. h5 The bottom input box is blocked by the keyboard

H5 page There is a very painful problem is that when the input box at the bottom, click on the soft keyboard after the input box will be obscured. can be resolved in the following ways

var // browser's current height       $ (window). Resize (function() {         if(document). Height () <  Oheight) {                 $ ("#footer"). CSS ("position", "static");    } Else {                 $ ("#footer"). CSS ("position", "absolute");    }           });

5. Do not allow Android phone to recognize the mailbox

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

6. Prohibit IOS from identifying long serial numbers for phone calls

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

7. Disable IOS popup various action windows

-webkit-touch-callout:none

8. Eliminate Transition splash screen

-webkit-transform-style: preserve-3d;     /*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/-webkit-backface-visibility: hidden;      /*(设置进行转换的元素的背面在面对用户时是否可见：隐藏)*/

9.iOS system Chinese Input method when entering English, there may be a one-sixth space between letters

Can be removed by regular meansthis.value = this.value.replace(/\u2006/g, ‘‘);

10. ProhibitiOS and Android user selected text

-webkit-user-select:none

11. Audio elements and video elements cannot be played automatically in iOS and Andriod

Solution: Touch screen is broadcast

$ (' HTML '). One (' Touchstart ',function() {    audio.play ()})

12.ios Cancel Input The default capitalization of the English initials at the time of input

<input autocapitalize= "Off" autocorrect= "off"/>

13.android to cancel the input voice button

Input::-webkit-input-speech-button {Display:none}

CSS Animation page Flash white, animation lag

Workaround:
1. use synthetic attributes transform and opacity as much as possible to design CSS3 animations without using the position left and top to locate
2. Turn on hardware acceleration

  -webkit-transform:translate3d (0, 0, 0);     -moz-transform:translate3d (0, 0, 0);      -ms-transform:translate3d (0, 0, 0);          Transform:translate3d (0, 0, 0);

16.fixed Locating defects

• Fixed element easy to locate error under iOS, soft keyboard popup, affect fixed element positioning
• Android under fixed performance is better than iOS, when the soft keyboard pops up, does not affect the fixed element positioning
• Position:fixed not supported under iOS4
• Solution: Use the Iscroll plugin to solve this problem

17. Prevent automatic font resizing when rotating the screen

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}

The placeholder of Nput will appear in the position of text.

Input placeholder will appear in the case of text position bias: PC-side settings line-height equals height can be aligned, while the mobile side is still biased, the solution is set Line-height:normal

19 round-Trip caching issues

Click the browser fallback, sometimes do not automatically do JS, especially in the Mobilesafari. This is related to round-trip caching (Bfcache) .

解决方法 ：window.onunload = function(){};

Mobile-side compatibility issues solution