Turn: 2016HTML5 Mobile end of the latest compatibility problem solution;

1, Android browser to see the background picture, some devices will be blurred.
With the same proportion of pictures on the PC is very clear, but the phone is very vague, why is it?
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 960640 resolution, on the page only show 480320, So devicepixelratio=2. Now Android is chaotic, there are 1.5, there are 2 also have 3. To make the picture appear clearer on the phone, you must use the 2x background image instead of the IMG tag (twice times the general case). For example, the width of a div is 100100, the background map must be 200200, and then Background-size:contain, so the picture is more clear.
The code is as follows:
Background:url (.. /images/icon/all.png) No-repeat Center Center;
-webkit-background-size:50px 50px;
background-size:50px 50px;display:inline-block; width:100%; height:50px;
or designate Background-size:contain; all can, everybody try!

2. Image 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

An example of a canvas is illustrated below:
<li><canvas></canvas></li>
JS dynamic loading pictures and Li Total example 17 pictures!
var total=17;
var zwin=$ (window);
var render=function () {
var padding=2;
var winwidth=zwin.width ();
var Picwidth=math.floor ((winwidth-padding*3)/4);
var tmpl = ';
for (Var i=1;i<=totla;i++) {
var p=padding;
var imgsrc= ' 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> ";
var imageobj = new Image ();
Imageobj.index = i;
Imageobj.onload = function () {
var CVs =$ (' #cvs_ ' +this.index) [0].getcontext (' 2d ');
Cvs.width = This.width;
Cvs.height=this.height;
Cvs.drawimage (this,0,0);
}
IMAGEOBJ.SRC=IMGSRC;
}
}
Render ();
3, if the mobile site is not compatible with IE browser, generally we will use ZEPTOJS.
Zeptojs built-in Touch events method, you can see http://zeptojs.com/#Touch events
Look at the Zeptio new version of the API, has supported IE10 above the browser, the ZEPTOJS can choose to use!
4, to prevent the mobile phone in the enlargement and reduction of the page.
This is the most basic, the most mobile site developers should know, is to set the meta-viewport
Also, some mobile sites we see the following statement:
<! DOCTYPE HTML PUBLIC "-//wapforum//dtd XHTML Mobile 1.0//en" "Http://www.wapforum.org/DTD/xhtml-mobile10.dtd" >
The way the DTD is set is the XHTML notation, and if our page is using HTML5, you can simply declare <! without setting up a DTD. DOCTYPE html>.
Use viewport to prevent the page from zooming. User-scalable is usually set to zero to close the user's behavior on page view scaling
<meta name= "viewport" content= "user-scalable=0"/>
But for better compatibility, we'll use the full viewport setting.

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

Of course, user-scalable=0, some people also write user-scalable=no, all can.

5, Apple-mobile-web-app-capable
Apple-mobile-web-app-capable is to set whether the Web app runs in full-screen mode.
Grammar:
<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, or vice versa. 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.
6, Format-detection
Format-detection starts or disables the phone number in the auto-identify page.

Grammar:
<meta name= "format-detection" content= "Telephone=no" >
Description
By default, the device automatically recognizes any string that might be a phone number. Setting Telephone=no can disable this feature.
7, HTML5 call the Android or iOS dialing function
HTML5 provides a label for automatic call dialing, as long as you add Tel: in the href of the a tag.
As follows: <a href= "tel:10010" >10010</a>
8. Html5gps Positioning function
For details, see: http://www.w3school.com.cn/html5/html_5_geolocation.asp
9, pull the scroll bar up and down, slow
Body {
-webkit-overflow-scrolling:touch;
Overflow-scrolling:touch;
}
10. Prohibit copying and selecting text
Element {
-webkit-user-select:none;
-moz-user-select:none;
-khtml-user-select:none;
User-select:none;
}
Resolve mobile devices to select page text (depending on product needs)
11, long time to press and hold the page flash back
element {
-webkit-touch-callout:none;
}
12. The default inner shadow of the input box under iphone and ipad
element{
-webkit-appearance:none;
}
13. Translucent gray matte when touching elements under iOS and Android
Element {
-webkit-tap-highlight-color:rgba (255,255,255,0)
}
14, active compatibility processing is pseudo-class: Active failure
Method One: Body add Ontouchstart
<body ontouchstart= "" >
Method Two: JS to document BIND 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>
15. Animation Definition 3D Hardware acceleration enabled
Element {
-webkit-transform:translate3d (0, 0, 0)
Transform:translate3d (0, 0, 0);
}
16.1px Frame of Retina screen
Specifically please baidu Google keyword, the solution has a lot
17, 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 classes:
if (' Webkitmask ' in Document.documentElement.style) {
Alert (' Support mask ');
} else {
Alert (' Mask not supported ');
}
18. When rotating the screen, the font size adjustment problem
HTML, body, form, fieldset, p, Div, H1, H2, H3, H4, H5, h6 {
-webkit-text-size-adjust:100%;
}
19. Transition splash Screen
/set how embedded elements are rendered in 3D space: Reserved 3D/
-webkit-transform-style:preserve-3d;
/sets whether the back of the element to be converted is visible when facing the user: hidden/
-webkit-backface-visibility:hidden;
20. Fillet bug
Some Android phone rounded corners fail
Background-clip:padding-box;
21. Top status bar background color
<meta name= "Apple-mobile-web-app-status-bar-style" content= "Black"/>
Description
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 20px height of the page, while the Retina screen for iphone4 and ITOUCH4 is 40px).
Defaults are default values.
22. Set the cache
<meta http-equiv= "Cache-control" content= "No-cache"/>
Mobile pages are 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.
23. 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"/>
Different desktop icons are defined for different devices under iOS. 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 57*57 (px) or retina can be set to 114*114 (px), ipad size is 72*72 (px)
24. Start Screen
<link rel= "Apple-touch-startup-image" href= "Start.png"/>
The screen image that is displayed when the page starts loading under iOS to avoid white screen when loading. You can specify a different size by Madia:
<!--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 "/>
25. 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" >
Others, optimized for handheld devices, are targeted at 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= ">"
Windows Phone clicks No highlight
<meta name= "Msapplication-tap-highlight" content= "no" >
26, iOS input keyboard event KeyUp, KeyDown, keypress support is 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 the HTML5 Oninput event to replace the KeyUp
<input type= "text" id= "Testinput" >
<script type= "Text/javascript" >
document.getElementById (' Testinput '). AddEventListener (' input ', function (e) {
var value = E.target.value;
});
</script>
Then you can achieve a similar keyup effect!
27, H5 website input set to Type=number problem
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.
A solution, I am currently using JS. As follows
<input type= "number" oninput= "checktextlength (this, ten)" >
function checktextlength (obj, length) {

if (Obj.value.length > Length) {

Obj.value = obj.value.substr (0, length);

}
}
Issue two, because the form submission default 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, generally will 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 I enter 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;
}
28. The iOS Settings Input button style will be overridden by the default style
The solution is as follows:
Input
TEXTAREA {
border:0;
-webkit-appearance:none;
}
Set Default style to None
29, iOS keyboard letter input, default first letter capitalization
Solutions, set the following properties
<input type= "text" autocapitalize= "Off"/>
30. Select drop-down to set right alignment
Settings are as follows:
Select option {
Direction:rtl;
}
31, through transform for skew deformation, rotate rotation will cause the occurrence of sawtooth phenomenon 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)
32. Click 300ms Delay on the mobile side
300ms acceptable, but because of the problem of 300ms, we have to solve. 300MS caused the user experience is not very good, to solve this problem, we generally on the mobile side with the tap event to replace the Click event.
Recommended two JS, one is Fastclick, the other is Tap.js
For 300ms latency, see: http://thx.github.io/mobile/300ms-click-delay/
33. Mobile Endpoint Penetration problem
The cases are as follows:
<div id= "haorooms" > Nod event Test </div>
<a href= "#" >www.xxx.com</a>
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:
$ (' #haorooms '). On (' Tap ', function () {
$ (' #haorooms '). Hide ();
});
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.
Cause: Touchstart earlier than touchend earlier than click. That is, the click Trigger is a delay, the time is about 300ms, that is, we tap to hide after the mask, when the click has not been 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, use the Touchend event (recommended).

(2) using Fastclick,https://github.com/ftlabs/fastclick
(3) block the click of a tag with preventdefault
(4) Delay a certain amount of time (300ms+) to handle the event (not recommended)
(5) The above generally can be resolved, it is not possible to replace the Click event.
Here's a look at the Touchend event, as follows:
$ ("#haorooms"). On ("Touchend", function (event) {
Event.preventdefault ();
});
34, eliminate the IE10 inside the fork number
Input:-ms-clear{display:none;}
35, about IOS and OS X-side font optimization (the screen will appear font bold inconsistency, etc.)
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%;
36, about the IOS system, the Chinese input method input in English, the letter may appear between a one-sixth space can be removed by regular
This.value = This.value.replace (/\u2006/g, ");
37, 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).
Workaround Code:
Document.addeventlistener (' Touchstart ', function () {
document.getElementsByTagName (' audio ') [0].play ();
document.getElementsByTagName (' audio ') [0].pause ();

});

38. Mobile-HTML5 input date does not support placeholder problem

This I feel there is no good solution, using the following methods
<input placeholder= "Date" class= "Textbox-n" type= "text" onfocus= "(this.type= ' Date ')" id= "Date" >
Some browsers may have to click two times!
39, some models exist 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.
40. Invoke the option of select to expand
Zepto Way:
$ (sltelement). Trrgger ("MouseDown");

Native JS mode:

function Showdropdown (sltelement) {

var event;

event = document.createevent (' mouseevents ');

Event.initmouseevent (' MouseDown ', true, true, window);

Sltelement.dispatchevent (event);
};

Turn: 2016HTML5 Mobile end of the latest compatibility problem solution;