"Go" HTML5 mobile end-to-date 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 specify 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

The following example shows an example of a canvas: <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, 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 viewport in meta and there are some mobile websites that we see below 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. Usually the user-scalable is 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 will use the full viewport settings.  

<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-capableapple-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. 6. format-detectionformat-detection Start or disable the phone number in the auto-identify page.   Syntax: <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 Android or iOS dial-up function HTML5 provides automatic call dialing label, as long as the A-tag in the href add Tel: yes. As follows: <a href= "tel:10010" >10010</a>8, HTML5GPS positioning function specifically see: http://www.w3school.com.cn/html5/html_5_ GEOLOCATION.ASP9, drag 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 device to select page text (depending on product needs) 11, long time hold down the page appears flash element {-webkit-touch-callout:none;} 12, iphone and ipad input box default inner shadow Element{-webkit-appearance:none;} 13. Translucent Gray Matte Element {-webkit-tap-high When touch elements under iOS and AndroidLight-color:rgba (255,255,255,0)}14, 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>15, animation definition 3D Enable hardware acceleration element {-webkit-transform:translate3d (0, 0, 0) transform:translate3d (0, 0, 0);} 16, the Retina screen 1px border specific Baidu Google keyword, the solution has a lot of 17, WebKit mask compatible with some low-end phone does not support CSS3 mask, can choose to downgrade processing. For example, you can use JS judgment to refer to different class:if (' Webkitmask ' in Document.documentElement.style) {alert (' Support mask ');} else {alert (' Mask not supported ');} 18. When rotating the screen, font resizing problem html, body, form, fieldset, p, Div, H1, H2, H3, H4, H5, h6 {-webkit-text-size-adjust:100%;} 19, Transition splash screen/Set embedded elements in 3D space how to render: Reserved 3D/-webkit-transform-style:preserve-3d;/ Sets whether the back of the element to be converted is visible when facing the user: Hide/-webkit-backface-visibility:hidden;20, fillet bug some Android phone fillets fail background-clip: padding-box;21, 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 specify full-screen mode with apple-mobile-web-app-capable. 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"/> 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. 23. Desktop Icon <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 to 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"/> picture size can be set to 57*57 (px) or retina can be defined as 114* 114(px), ipad size 72*72 (px) 24, splash screen <link rel= "Apple-touch-startup-image" href= "start.png"/>ios the screen image displayed when the page starts loading, 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 "/>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= "apps" ><!--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 mainly targeted at some older browsers that do not recognize viewport, such as BlackBerry <meta name= "handheldfriendly" content= "true" > Microsoft's old browser <meta name = "mobileoptimized" content= ">windows" phone click No highlights <meta name= "Msapplication-tap-highlight" content= "no" > 26, iOS input keyboard event KeyUp, KeyDown, keypress support is not very good problem is this, use the input search to do fuzzy search, enter keywords in the keyboard, will be through the Ajax background query, and then return data, The returned data is then marked with 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) {   var value = E.target.value;}); </script> then achieve a similar keyup effect! 27, H5 website input set to type=number problem H5 Web page input type set to number will generally produce three problems, one problem is maxlengthThe 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. The following <input type= "number" oninput= "checktextlength (this, ten)" >function checktextlength (obj, length) { 

if (Obj.value.length > Length) {

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

     }} question two, because form submission defaults to form validation, step default is 1, to set the Step property, if you retain 2 decimal places, the wording is as follows: <input type= "Number" step= "0.01"/> about step, I am here to do a simple introduction, input type=number, generally will automatically generate a up and down arrow, click on the arrow by default Add a step, 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;} 28. The iOS Settings Input button style will be overridden by the default style: Input,textarea {border:0;-webkit-appearance:none;} Set the default style to None29, iOS keyboard letter input, default initial capitalization solution, set the following properties <input type= "text" autocapitalize= "Off"/>30, select The drop-down selection sets the right alignment setting 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, Mobile Click 300ms Delay 300ms acceptable, But because of the problem of 300ms, we have to solve it. 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, one is tap.js about 300ms delay, specific see: HTTP://THX.GITHUB.IO/MOBILE/300MS-CLICK-DELAY/33, Mobile endpoint penetration problem cases are as follows:< Div id= "haorooms" > Nod event Test </div><a href= "#" >www.xxx.com</a>div is an absolutely positioned mask, and Z-index is above a. While a tag is a link in the page, we bind a 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) Use Fastclick,https://github.com/ftlabs/fastclick (3) to block the Click (4) Delay of a tag for a certain amount of time (300ms+) to handle the event with Preventdefault (not recommended) (5) The above generally can be resolved, it is not possible to replace the Click event. The following is a description of 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 the iOS and OS X-side font optimization (horizontal screen will appear font bold inconsistency, etc.) the iOS browser will reset the font size when the screen, set Text-size-adjust to none can solve the problem on iOS, but the desktop version of Safari font scaling function will be invalid, because This best practice is to Text-size-adjust to 100%.

-webkit-text-size-adjust:100%;

-ms-text-size-adjust:100%;

text-size-adjust:100%;36, about IOS system, Chinese Input method input in English, there may be a one-sixth space between the letters can be removed by regular this.value = This.value.replace (/\u2006/g, 37, mobile HTML5 audio autoplay Failure 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). Resolution 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

I don't feel a good solution for this, <input placeholder= "date" class= "Textbox-n" type= "text" onfocus= "(this.type= ' Date ')" id= "in the following ways: 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 comes with a close button (a pseudo element), and usually in order to be compatible with all browsers, we will implement one ourselves, The method for removing the native Close button at this time 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 mode: $ (sltelement). Trrgger ("MouseDown");

Native JS mode:

function Showdropdown (sltelement) {

var event;

event = document.createevent (' mouseevents ');

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

Sltelement.dispatchevent (event);};

"Go" HTML5 mobile end-to-date compatibility problem solution