Mobile-side compatibility issues considerations

1. Latency response for iOS mobile Click event 300ms

A Web page on a mobile device has a 300ms delay, sometimes causing a button click Delay or a click failure.

In order to be suitable for the PC-side of the large screen page can be better displayed on the mobile phone, using a double-click Zoom (double tap to zoom) scheme, released the iOS system powered safari. such as: On the phone with a browser to open a PC Web page, you may see the content of the page can be filled with 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: Quickly tap two times on the screen with your finger, and your IOS-brought Safari will zoom the page to its original scale.

The browser determines the method of Quick click, when the user clicks on the screen an element, such as a jump link <a href= "#" ></a>, where the browser will first capture the click, 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.IOS non-clickable element triggering event
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 requirements are floating layer operations, the elements that are masked on Samsung can still get focus, click, change), there are two 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 when the input box is at the bottom, the input box is obscured when you click on the soft keyboard. can be resolved in the following ways

var oheight = $ (document). Height (); Browser Current height $ (window). Resize (function () {if (document). Height () < Oheight) {$ ("#footer"). CSS ("Positio   n "," Static ");   }else{$ ("#footer"). CSS ("position", "absolute"); }         });

This article is also a good solution for the fixed layout of the Web mobile

http://efe.baidu.com/blog/mobile-fixed-layout/

5. Prohibit Android phone recognition 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 means

This.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 solution:

1. Use composition 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;}

Placeholder of Input will appear on the text position bias

The placeholder of input will appear in the case of text position bias.

PC-side: Set line-height equals height to align

Mobile: Is still biased, the solution is to set the 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) . Workaround:

Window.onunload = function () {};

Calc's compatibility handling

The calc variable in CSS3 must be prefixed with-webkit-in the IOS6 browser, and the current FF browser does not have to-moz-the prefix.
The Android browser still does not support Calc, so add a conservative size before:

div {width:95%;   Width:-webkit-calc (100%-50px); Width:calc (100%-50px); }

IOS6 under Pseudo-class: hover

Elements other than <a> are not valid and are valid under Android. Similar

Div#topfloatbar_l:hover #topFloatBar_menu {display:block;}

Such navigation shows that the iOS6 click No click Effect, only by increasing the click Listener to add or decrease the element class to control the child elements.

22 edit unsightly clicks on the mobile side of the highlight effect, iOS and Android under the effective:

* {-webkit-tap-highlight-color:rgba (0,0,0,0);}

But this method in the current Android browser, can only remove the orange background color, click the resulting highlight border or not removed, to be solved!

An CSS3 attribute, plus, the event listener for the associated element is invalidated, which means that the element becomes "visible, not lit." IE to 11 only started to support, the current version of other browsers are basically supported. See here for details: https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events

Pointer-events:none;

Zepto Point-through solution

Zepto tap is a tap event that is simulated by listening to a touch event bound to the document, and the tap event is triggered on the document, tap event (Touchstart\touchend) when clicked is complete. Need to bubble to document to trigger, and before bubbling to document, the user Hand touch screen (Touchstart) and left screen (touchend) is triggered by the Click event, because the click event has a delay trigger ( This is why the mobile does not use the click and the tap, which is probably 300ms, in order to implement the Safari's double-click event Design, so after the tap event, the pop-up selection component is immediately hidden, when the Click event is also in the delay of 300ms, When the 300ms arrives, the click is not actually finished but hides the element below, if the element that is directly below the binding of the Click event will be triggered at this time, if there is no binding click event, when there is no click, but directly below the input box ( Or select Select box or single check box), click the default focus and pop up the input keyboard, there is the above point penetration phenomenon.

Introduce Fastclick.js, add the following JS code to the page

1 Window.addeventlistener ("Load", function () {2 Fastclick.attach (document.body); 3}, False);

Or JS with Zepto or jquery, plus

1 $ (function () {2 Fastclick.attach (document.body); 3});

Of course, that's require:

1 var Fastclick = require (' Fastclick '); 2 Fastclick.attach (document.body, Options);

Scenario Two: Replace the tap event with Touchend and block the default behavior of Touchend preventdefault ()

1 $ ("#cbFinish"). On ("Touchend", function (event) {2//a lot of processing such as hiding something 3 event.preventdefault (); 4});

Scenario Three: Delay a certain amount of time (300ms+) to handle the event

1 $ ("#cbFinish"). On ("Tap", function (event) {2 setTimeout () (function () {3///a lot of processing such as 4},320 of what is hidden); 5});

1. AppearanceA, page height rendering error

in each mobile browser often appear this page height 100% rendering error, the low end of the page and the system comes with the navigation bar coincident, the height is not correct we need to reset it, reset it by JavaScript code:

Document.documentElement.style.height = window.innerheight + ' px ';

B, overlay area highlighting

In some Android models, click on a section of the page may appear in the yellow box of the second Flash, which is the default custom style of some models of the system itself, to the element a CSS style reset:

-webkit-tap-highlight-color:rgba (0,0,0,0);

2. BehaviorA. Event cannot be triggered

In the context of some Android models where events cannot be triggered and forms cannot be entered, we set the style for elements that require input or triggering events:-webkit-transform:translate3d (0,0,0), However, the new version has directly fixed the problem.

B: The active effect is not compatible

under the Android 4.0 version the css:active pseudo state effect is incompatible, and we give the element the Touch Series event (touchstart/touchend/ Touchmove) binds an empty anonymous method :

var Element=document.getelementsbyid ("Btnshare"), Element.addeventlistener (' Touchstart ', function () {},false);

3. ApplicationA, browser crashes

var act = function () {Window.removeeventlistener (' devicemotion ', act);}; Window.addeventlistener (' devicemotion ', act,false);

The Unbind function is written in the event processing to cause the crash of the Xiaomi phone, so we do not write the time of the Unbind in event processing.

B, pre-load, AutoPlay invalid

As shown in the table above, after a simple test to find that preload, the effectiveness of AutoPlay is affected by the operating system, browser (webview), version, etc., Apple Official rules must be manually triggered by the user to load audio, then we capture a user input, let the audio load implementation preload :

Play and pause it Oncedocument.addeventlistener (' Touchstart ', function () {document.getelementsbytagname (' audio ') [0 ].play (); document.getElementsByTagName (' audio ') [0].pause ();});

C. Cannot play multiple audio simultaneously

In the Android device , playing the latter audio will interrupt the previous audio, but not synchronized playback , this is the current system senior decision, we only take the graceful down the right way to let Android choose a different style of audio before and after switching playback instead of simultaneous playback, Achieve an audio effect that is close to the expected.

D, partial scrolling is not supported

The overflow:scroll style setting ScrollBar is not valid for elements other than the body (HTML) element below the Android 4.0 version , there are two solutions :

1, skillfully with the layout directly set the style scroll bar on the Body (HTML), the other elements "illusion scrolling."

2, using iscroll, self-write js control translate,scrolltop simulation

4. System /Hardware A, weird suspension of the form

In some Android models the input box may appear weird superfluous flyout, after observation and testing found only input:password type of input box exists, then we just use the Input:text type of input box and through the style -webkit-text-security:disc; Hide input password to resolve.

B, error appears scroll bar

In the Game inline page appears the scroll bar should not appear, and the content does not exceed the content area width, after the test Overflow:hidden invalid, through a series of attempts to use the ancient <body scroll= "No" > Writing solution, Try a different way of writing and attributes will be a surprise Oh!

C, link open System Browser

It is a very bad experience to have a click-through link to invoke the System browser in some Android models that are webview in-game. Then we try to add the target= "_blank" property to this element is possible to resolve, if it is not resolved then need to modify the iOS or Android native system functions.

DFlex box is not compatible

In the game embedded WebView in the case of the Flex box layout is incompatible, the figure shows that the following part of the navigation dislocation, although the previous careful review of the Flex box compatibility, but in the game embedded page can not be determined that its call system browser version and compatibility, So led to the error, so we wrote the full history version of the 3 kinds of Flex box solution. Then we think in the process of writing a page or in a conservative and stable way to write style can reduce the trouble.

Http://www.cnblogs.com/wangpenghui522/p/5398137.html

This article is from the "small MoU-front end" blog, please make sure to keep this source http://9886022.blog.51cto.com/9876022/1900575

Mobile-side compatibility issues considerations