iOS and Android adaptation

In some cases, for non-clickable elements such as (Label,span) listen for click events, iOS does not trigger

Solution: CSS added cursor:pointer;

The input, select, a, etc. 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 elements that are masked on Samsung can still get focus, click, change), There are two solutions: 1. is to add the corresponding class name control after the layer display, truncating the event that gets the focus element below the display layer to get 2. Is the disabled property by which the focusable element is added, or the way the attribute is added to the DOM Lock (a transformation of disabled)

Android Browser looks at the background image, some devices will blur.

/With the same proportion of pictures on the PC is very clear, but the phone is very vague, what is the reason? After research, is Devicepixelratio mischief, because the cell phone resolution is too small, if the resolution to display the page, so the word will be very small, so Apple originally put the iphone 4 960*640 resolution, on the page only show the 480* 320, so devicepixelratio=2. Now Android is 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). For example, the width of a div is 100*100, the background map must be 200*200, and then Background-size:contain, so the picture is more clear. The code can be as follows: Background:url (.. /images/icon/all.png)  

The problem with the H5 page is that when the input box is at the bottom, the input box is obscured when you click on the soft keyboard.

var oheight = $ (document) can be resolved in the following manner. Height (); Browser Current height $ (window). Resize (function () {   if (document). Height () < oheight) {         $ ("#footer"). CSS ("position "," Static ");   } else{         $ ("#footer"). CSS ("position", "absolute");}  );

This article is also a good solution for fixed layout of web mobile http://efe.baidu.com/blog/mobile-fixed-layout/

Don't let Android phone recognize mailbox

<meta content= "Email=no" name= "Format-detection"/>

Prevent IOS from identifying long string numbers for phones

<meta content= "Telephone=no" name= "Format-detection"/>

Prevent IOS from popping up various action windows

-webkit-touch-callout:none

Eliminate Transition splash screen

-webkit-transform-style:preserve-3d; /* Set the embedded elements in 3D space how to render: preserve 3d*/-webkit-backface-visibility:hidden; /* (sets whether the reverse side of the element being converted is visible when facing the user: hidden) */

IOS system Chinese Input method when entering English, there may be a one-sixth space between the letters

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

Prevent iOS and Android users from selecting text

-webkit-user-select:none

Audio elements and video elements do not play automatically in iOS and Andriod

Solution: Touch screen to broadcast $ (' HTML '). One (' Touchstart ', function () {Audio.play ()})

The default capitalization of the English initials at input when you cancel input under iOS

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

Android under Cancel 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);

Fixed positioning defects

iOS fixed element easy to locate error, soft keyboard pop-up, affect fixed element positioning Android under fixed performance to be better than iOS, soft keyboard pop-up, will not affect fixed element positioning iOS4 does not support position:fixed solution: Use Iscroll plugin to solve this problem

Automatically adjust font size when you prevent the screen from rotating

HTML, body, form, fieldset, p, Div, H1, H2, H3, H4, H5, h6 {-webkit-text-size-adjust:none;}

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

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

Round-Trip caching issues

Clicking on the browser fallback sometimes does not automatically execute JS, especially in Mobile safari. This is related to * round-trip cache (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 pseudo-Class: hover

Elements other than <a> are not valid and are valid under Android. Similar to Div#topfloatbar_l:hover #topFloatBar_menu {display:block;} Such navigation shows no click on the iOS6 click Effect, only by increasing the click Listener to add or subtract class to control the child elements.  

Modify unsightly click Highlighting on the mobile side, both iOS and Android:

*{-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.

Pointer-events:none;

See here for details: https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events

Zepto-Point 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,
Before bubbling to document, the touch screen (Touchstart) and departure screen (touchend) of the user's hand trigger the Click event, because the click event has a delay trigger (which is why the mobile does not use the click for the reason of Tap) ( It's about 300ms,
In order to achieve the design of the double-click event of Safari, so after the tap event, the pop-up selection component is immediately hidden, the Click event is also in the delay of 300ms, when the 300ms arrives, the click is actually not complete but the bottom of the hidden element ，
If the element that is directly below the binding has a click event that is now triggered, if the click event is not bound, then there is no click, but just below the input box (or select box or radio check box), click Default Focus and eject the input keyboard,
There is also the phenomenon of the above point penetration. (1) Introduce fastclick.js, add the following JS code in the page window.addeventlistener ("Load", function () {Fastclick.attach (document.body);}, FALSE);//(2) or JS with Zepto or jquery plus $ (function () {Fastclick.attach (document.body);}); /(3) Of course require words: var Fastclick = require (' Fastclick '); Fastclick.attach (document.body, options);//(4) Replace the tap event with Touchend and block the default behavior of Touchend Preventdefault () $ ("#cbFinish"). On ("Touchend", function (event) {///a lot of processing such as hidden Event.preventdefault ();}); /(5) Delay a certain amount of time (300ms+) to handle the event $ ("#cbFinish"). On ("Tap", function (event) {setTimeout () () (function () {//many processes such as Hidden},320);});

Picture loading
If you have problems with slow loading of pictures, in this case, mobile phone development is generally loaded with the canvas method:
For specific canvas APIs see: http://javascript.ruanyifeng.com/htmlapi/canvas.html

The following example shows an example of a canvas: <li><canvas></canvas></li>js dynamic loading pictures and Li Total example 17 pictures! vartotal=17; varzwin=$ (window); Varrender=function () {  varpadding=2;   Varwinwidth=zwin.width ();   Varpicwidth=math.floor ((winwidth-padding*3)/4);   Vartmpl = ";  for (vari=1;i<=totla;i++) {  varp=padding;  Varimgsrc= ' img/' +i+ '. jpg '; if (i%4==1) {    p=0;}  Tmpl + = ' <li style= ' width: ' +picwidth+ ' px;height: ' +picwidth+ ' px;padding-left: ' +p+ ' px;padding-top: ' +padding+ ' px; " ><canvas id= "Cvs_ ' +i+ '" ></canvas></li> ";  Varimageobj = NewImage ();   Imageobj.index = i;   Imageobj.onload = function () {Varcvs =$ (' #cvs_ ' +this.index) [0].getcontext (' 2d '); cvs.width = this.width;cvs.height= This.height;cvs.drawimage (this,0,0);  }  imageobj.src=imgsrc;}  } Render ();

Prevent Web pages in your phone from zooming in and out

<meta name= "viewport" content= "width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>

Apple-mobile-web-app-capable

Apple-mobile-web-app-capable is to set whether the Web app runs in full-screen mode. Syntax: <meta name= "apple-mobile-web-app-capable" content= "yes" > Description: If the content is set to yes,web the app will run in full-screen mode, otherwise not. The default value for content is no, which indicates normal display. You can use the read-only property window.navigator.standalone to determine whether a Web page is displayed in full-screen mode.

HTML5 calls the dial-up feature of Android or iOS

HTML5 provides a label for automatic call dialing, as long as you add Tel: in the href of the a tag. as follows: <ahref= "tel:4008106999,1034" >400-810-6999 to 1034</a> dial the phone directly as follows: <a href= "tel:15677776767" > Click to call 15677776767</a>

HTML5GPS positioning function specific see: http://www.jb51.net/post/html5_GPS_getCurrentPosition

Pull the scroll bar up and down, slow

body {-webkit-overflow-scrolling:touch; overflow-scrolling:touch;}

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

Prevent copying, selecting text

Element {-webkit-user-select:none;  -moz-user-select:none;  -khtml-user-select:none;   User-select:none;}

Default inner shadow of input box under iphone and ipad

element{  -webkit-appearance:none;}

Translucent gray matte when touching elements under iOS and Android

Element {  -webkit-tap-highlight-color:rgba (255,255,255,0)} sets an alpha value of 0 to remove the translucent gray matte. Note: The transparent property value is not valid under Android.

An article is described in detail, address: Http://www.jb51.net/post/phone_web_ysk

Active-compatible processing is pseudo-class: active invalidation

Method One: Body add ontouchstart<body ontouchstart= "" > method two: JS to document binding Touchstart or Touchend event <style>   a { Color: #000;   }   a:active {  color: #fff;} </style><a herf=foo >bar</a> <script>document.addeventlistener (' Touchstart ', function () {}, False);</script>

Animation definition 3D Hardware acceleration enabled

Element {  -webkit-transform:translate3d (0,0,0)  Transform:translate3d (0,0,0);} Note: 3D distortion consumes more memory and power

1px border of Retina screen

element{  Border-width:thin;}

WebKit Mask compatible processing

Some low-end phones do not support CSS3 mask, and can selectively downgrade processing. For example, you can use JS judgment to refer to different class:if (' Webkitmask ' Indocument.documentElement.style) {  alert (' Support mask ');} else{  alert (' Mask not supported ');}

Round corner Bug

Some Android phone fillet failure solutions: background-clip:padding-box;

Top status bar background color

<meta name= "Apple-mobile-web-app-status-bar-style" content= "Black"/> Note: This meta tag will not work unless you first use apple-mobile-web-app-capable to specify full-screen mode. If content is set to default, the status bar is displayed correctly. If set to blank, the status bar will have a black background. If set to Blank-translucent, the status bar appears as black translucent. If set to default or blank, the page appears below the status bar, where the status bar occupies the upper part, and the page occupies the lower part, which does not obscure or obscure the other. If set to Blank-translucent, the page fills the screen, where the top of the page is obscured by the status bar (which overrides the 0px height of the page, while the Retina screen for iphone4 and ITOUCH4 is 0px). Defaults are default values.

Setting up the cache

<meta http-equiv= "Cache-control" content= "No-cache"/> The phone page is usually cached after the first load, and then each refresh uses the cache instead of going back to the server to send the request. If you do not want to use the cache, you can set No-cache.

Desktop icons

<link rel= "Apple-touch-icon" href= "touch-icon-iphone.png"/><link rel= "Apple-touch-icon" sizes= "76x76" href = "Touch-icon-ipad.png"/><link rel= "Apple-touch-icon" sizes= "120x120" href= "touch-icon-iphone-retina.png"/ ><link rel= "Apple-touch-icon" sizes= "152x152" href= "Touch-icon-ipad-retina.png"/>ios define different desktop icons for different devices. If not defined, the current screen is used as an icon. The above-mentioned may feel that there will be a default gloss, the following setting method can remove the gloss effect, restore the effect of the design chart!   <link rel= "apple-touch-icon-precomposed" href= "Touch-icon-iphone.png"/> Image size can be set to 5757 (px) or retina can be set to 114114 (px), ipad size is 72*72 (px)

Start screen

<link rel= "Apple-touch-startup-image" href= "start.png"/>ios the screen image displayed at the start of loading to avoid white screen when loading. The Madia can be used to specify different sizes:<!--iphone--><link href= "Apple-touch-startup-image-320x460.png" Media= "(device-width: 320px) "rel=" Apple-touch-startup-image "/><!--iPhone Retina--><link href=" Apple-touch-startup-image-640x920.png "Media=" (device-width:320px) and (-webkit-device-pixel-ratio:2) "Rel=" Apple-touch-startup-image "/><!--iPhone 5--><link rel=" Apple-touch-startup-image "media=" (device-width : 320px) and (device-height:568px) and (-webkit-device-pixel-ratio:2) "href=" Apple-touch-startup-image-640x1096.png " ><!--iPad portrait--><link href= "Apple-touch-startup-image-768x1004.png" media= "(device-width:768px) and (orientation:portrait) "rel=" Apple-touch-startup-image "/><!--iPad landscape--><link href=" Apple-touch-startup-image-748x1024.png "Media=" (device-width:768px) and (Orientation:landscape) "Rel=" Apple-touch-startup-image "/><!--iPad RetIna portrait--><link href= "Apple-touch-startup-image-1536x2008.png" media= "(device-width:1536px) and ( orientation:portrait) and (-webkit-device-pixel-ratio:2) "rel=" Apple-touch-startup-image "/><!--iPad Retina Landscape--><link href= "Apple-touch-startup-image-1496x2048.png" media= "(device-width:1536px) and ( Orientation:landscape) and (-webkit-device-pixel-ratio:2) "rel=" Apple-touch-startup-image "/>

Browser private and other meta

The following properties have not been applied in the project, you can write a demo test below! QQ Browser Private Full screen mode <meta name= "X5-fullscreen" content= "true" > Force vertical screen <meta name= "X5-orientation" content= "Portrait" > Force horizontal screen <meta name= "x5-orientation" content= "Landscape" > Application Mode <meta name= "X5-page-mode" content= "app" >// UC Browser private full screen mode <meta name= "Full-screen" content= "yes" > force vertical screen <meta name= "Screen-orientation" content= "Portrait" > Force horizontal screen <meta name= "screen-orientation" content= "Landscape" > Application Mode <meta name= "Browsermode" content= " Application ">//other optimized for handheld devices, mainly for some older browsers that do not recognize viewport, such as BlackBerry <meta name=" handheldfriendly "content=" true "> Microsoft's old-fashioned browser <meta name= "mobileoptimized" content= "on" >windows phone click No highlight <meta name= " Msapplication-tap-highlight "content=" no ">

Input keyboard events KeyUp, KeyDown, keypress support in iOS not very good

The problem is that when using input search to do fuzzy search, in the keyboard input keywords, will be through the Ajax background query, and then return the data, and then the returned data for the keyword red. Using input to monitor the keyboard KeyUp event, in the Android phone browser is possible, but in the iOS phone browser red very slow, with input methods, not immediately corresponding KeyUp events, only after the deletion can be appropriate! Workaround: Can use HTML5 Oninput event to replace Keyup<input type= "text" id= "Testinput" ><script type= "Text/javascript" >  document.getElementById (' Testinput '). AddEventListener (' input ', function (e) {varvalue = E.target.value;  }); </script> then achieve a similar keyup effect!

H5 site input set to Type=number issue
```
H5 the type of Web page input is set to number generally produces three problems, one problem is that the MaxLength property is not good to use.
The other one is when the form is submitted, the default is to take the whole. Third, some Android phones appear style problems.

Problem solved, I currently use JS. The following <input type= "number" oninput= "checktextlength (this, ten)" >functionchecktextlength (obj, length) {    if ( Obj.value.length > Length)  {         obj.value = obj.value.substr (0, length);    }} Issue two, because form submission by default is the form validation, step default is 1, to set the Step property, if you retain 2 decimal places, the following wording: <input type= "number" step= "0.01"/> About step, I am here to do a simple introduction, input in Type=number, usually automatically generate a up and down arrow, click on the arrow to add a step by default, click the down arrow by default will reduce a step. The default step in number is 1.
That is step=0.01, you can allow 2 decimal places, and click the up and down arrows to increase 0.01 and decrease by 0.01 respectively. If step is used together with min, then the value must be between Min and Max. Look at the following example: <input type= "number" step= "3.1" min= "1"/> What numbers can be entered in the input box? First, the minimum value is 1, then you can enter 1.0, the second is can be entered (1+3.1) that is 4.1, and so on, each click up and down arrows will increase or decrease by 3.1, enter another number is invalid. This is the simple introduction of step. Problem three, remove input default style Input[type=number] {  -moz-appearance:textfield;} Input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button {  - Webkit-appearance:none;  margin:0;}

iOS settings input button style is overridden by the default style

The solution is as follows: Input,textarea {  border:0;   -webkit-appearance:none; } set default style to None

Select drop-down to set right alignment

Set as follows: Select option {Direction:rtl;}

Skew deformation through transform, rotate rotation can cause aliasing

Can be set as follows:-webkit-transform:rotate ( -4deg) skew (10deg) Translatez (0); Transform:rotate ( -4deg) skew (10deg) Translatez (0); outline:1px solid Rgba (255,255,255,0)

About IOS and OS X-side font optimizations (font bold inconsistencies appear on the screen)

iOS browser will reset the font size when you screen, set Text-size-adjust to None to solve the problem on iOS, but the desktop version of Safari font scaling function will be invalidated, so the best solution is to Text-size-adjust to 100%. -webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%;

Mobile End HTML5 Audio AutoPlay failure problem

This is not a BUG, because automatically play the Web page of audio or video, will give users some disturbing or unnecessary traffic consumption, so the Apple system and Android system will usually prohibit the automatic play and use JS trigger play, must be triggered by the user to play. Solution idea: First through the user Touchstart touch, trigger play and pause (the audio starts to load, the back with JS again operation will be no problem). Document.addeventlistener (' Touchstart ', function () {  document.getelementsbytagname (' audio ') [0].play ();  document.getElementsByTagName (' audio ') [0].pause ();});

Mobile-HTML5 Input date does not support placeholder issues

<input placeholder= "Date" class= "Textbox-n" type= "text" onfocus= "(this.type= ' Date ')"  id= "Date" >

Some models have the type search input, with the Close button style modification method

Some models of the search input control will come with a close button (a pseudo-element), and usually in order to be compatible with all browsers, we will implement one ourselves, the method of removing the native Close button is: #Search::-webkit-search-cancel-button {  display:none;} If you want to use the native Close button and want to make it conform to the design style, you can modify the style of the pseudo-element.

Invoke option for Select to expand

Zepto mode: $ (sltelement). Trigger ("MouseDown");//Native JS mode: Functionshowdropdown (sltelement) {  varevent;  event = document.createevent (' mouseevents ');  Event.initmouseevent (' MouseDown ', true,true, window);  Sltelement.dispatchevent (event);};

iOS and Android adaptation