"Super dry" mobile mobile Web Resource integration: Reprint

Reproduced in: http://www.w3cfuns.com/notes/24611/fbba9cbd616e795360ea45515494aa53.html Meta Basics H5 page window automatically adjusts to device width and prevents users from zooming the page   Ignore the numbers in the page as phone numbers   ignore the recognition of email addresses in the Android platform   when the site is added to the home screen Quick Start mode, you can hide the address bar for iOS only safari  Add Web site to Home screen Quick Start mode, only for iOS Safari top status bar style  viewport Template viewport template--general   here to start Content viewport template –target-densitydpi= Device-dpi,android 2.3.5 The following version does not support   Start Here content Reference case: http://action.weixin.qq.com/payact/readtemplate?t=mobile/2015/ Wxzfsht/index_tmpl FAQ Mobile How to define fonts font-family Chinese fonts using the system default, English with Helvetica Body{font-family:helvetica;} Refer to the thinking of using fonts on the mobile side Mobile font Unit font-size Select PX or REM for only a small number of mobile devices, and the resolution of the page has little impact, the use of PX can be used to adapt to a variety of mobile devices, using REM, such as only need to adapt to the iphone and ipad and other different resolution of the very large device REM Configuration reference: html{font-size:10px} @media screen and (min-width:321px) and (max-width:375px) {html{font-size:11px}} @media Screen and (min-width:376px) and (max-width:414px) {html{font-size:12px}} @media screen and (min-width:415px) and ( max-width:639px) {html{font-size:15px}} @media screen and (min-width:640px) and (max-width:719px) {html{font-size:20px}} @media screen and (min-width:720px) and (max-width:749px) {html{font-size:22.5px}} @media the screen and (min-width : 750px) and (max-width:799px) {html{font-size:23.5px}} @media screen and (min-width:800px) {html{font-size:25px}} Mobile Touch Events (differentiate between WebKit and Winphone) when a user finger is placed on a mobile device that is triggered by a touch event that slides on the screen WebKit touchstart--occurs when the finger touches the screen. Regardless of how many fingers are currently touchmove--when the finger is sliding on the screen, it is triggered continuously. Usually we slide the page again, and the Preventdefault () that invokes event can prevent the default from happening: Prevents the page from scrolling touchend--triggers when the touchcancel--system stops tracking when the finger leaves the screen. For example, when the touch process suddenly page alert () A prompt box, this event is triggered, this event is less used touchevent touches: all the finger information on the screen targettouches: finger information in the target area Changedtouches: When the last time the finger information of this event is triggered touchend, touches and targettouches information will be deleted, changedtouches save the final information, preferably used to calculate the finger information parameter information ( Changedtouches[0]) ClientX, clienty coordinates in the display area target: Current element reference: https://developer.mozilla.org/en-US/docs/Web/API/ TouchEvent Support Winphone 8 mspointerdown--occurs when the finger touches the screen. Regardless of how many fingers are currently mspointermove--when the finger is sliding on the screen, it is triggered continuously. Usually we slide the screen again, will call the CSS Html{-ms-touch-action:none;} You can prevent the default from occurring: Prevent the page from scrolling mspointerup--when the finger leaves the screen, triggers the mobile click Screen to generate 200-300 MS Latency response on the Web network on the mobile devicePage is 300ms delayed, Play will cause button click Delay or even click failure. Here are the historical reasons for the share of a colleague from a company: In 2007, Apple released the first iphone on the iOS system with safari in order to be able to use the big screen on the PC Web page can be better displayed on the phone, using a double tap to zoom (double taps to zoom) , such as you on the phone with a browser to open a PC 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 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 is that the browser needs to determine how fast clicks, when the user clicks on the screen an element, such as a jump link, where the browser will first capture the click, but the browser does not determine whether the user is simply to click the link or double-click on the part of the zoom operation, so, after capturing the first click, The browser will hold for a period of time t, if the user does not make the next click in the t time interval, then the browser will do the click Jump link processing, if the user has a second click in the time, then the browser will prohibit the jump, in turn to the portion of the Area page zoom operation. 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 solve the touch module of the 300ms delay zepto on the phone by clicking on the event, and the tap event is also in order to address the response order of the Click event in the latency issue of the clicks Ontouchstart ontouchmove Ontouchend onclick solves the problem of 300ms latency, and can also accelerate the response to events by binding Ontouchstart events What is a retina display, what's the problem Retina: an LCD screen with ultra-high pixel density, The same size of the screen displayed on the pixel point from 1 to multiple, such as on the same screen, the Apple device's Retina display, pixel points 1 to 4 in the HD display bitmap is magnified, the picture will become blurred, so the mobile side of the visual manuscript is usually designed to twice times the traditional PC so, The front-end solution is: The design manuscript cut out the image length is guaranteed to be even, andUse Backgroud-size to reduce the image to the original 1/2//Case Width Height: 200px*200px, then the following wording. css{width:100px;height:100px;background-size:100px 100px ;} The other elements of the original 1/2, such as the visual 40px font, the use of style is written in 20px. css{font-size:20px} Refer to "HD Display principle and Design" how to remove the translucent gray matte that is generated when elements are touched in an iOS system iOS users click on a link, a translucent gray matte appears, if you want to disable, you can set the alpha value of-webkit-tap-highlight-color to 0, that is, the last one of the property value is set to 0 to remove the translucent gray matte A,button, Input,textarea{-webkit-tap-highlight-color:rgba (0,0,0,0;)} part of the Android system when the elements are clicked on the border how to remove the Android user click on a link, There will be a border or a translucent gray matte, different manufacturers define the amount of the effect is not the same, you can set the alpha value of-webkit-tap-highlight-color to 0 to remove some of the machine's own effect a,button,input,textarea{- Webkit-tap-highlight-color:rgba (0,0,0,0;)-webkit-user-modify:read-write-plaintext-only;}- Webkit-user-modify has a side effect, is the input method can no longer enter more than one character in addition, some models do not remove, such as Millet 2 for the button class there is a way, do not use a or input tags, directly with the DIV tag reference " How to remove the border from a label on Android Winphone System A, the translucent gray background generated when the input tag is clicked how to remove the default appearance of  webkit form elements how to reset. Css{-webkit-appearance: none;} WebKit placeholder color value of form input box can change Input::-webkit-input-placeholder{color: #AAAAAA;} input:focus::- Webkit-input-placeholder{color: #EEEEEE;} webkit form input box placEholder text can be changed line iOS can, Android no ~ textarea tab can be wrapped ~ IE10 (winphone8) Form element default appearance how to reset disable the Select default drop-down arrow::-ms-expand Applies to the form selection control drop-down arrow's modification, has multiple property values, sets it to hide (Display:none) and uses the background image to decorate to get the effect we want. Select::-ms-expand {Display:none;} disables radio and checkbox default styles::-ms-check applies to form check box or radio button default icon modification, also has multiple property values, set it to hide (display:no NE) and use a background image to decorate it to get the effect we want. Input[type=radio]::-ms-check, Input[type=checkbox]::-ms-check {display:none;} Disable PC-side form input box default purge button When the form text entry box is entered, a text Clear button is displayed:-ms-clear applies to the Erase button's modification, the same setting makes it hidden (Display:none) and uses the background image to decorate to get the effect we want. Input[type=text]::-ms-clear, Input[type=tel]::-ms-clear, input[type=number]::-ms-clear {display:none;} disable iOS Long time does not trigger the system menu, prohibit ios&android long time to download pictures. Css{-webkit-touch-callout:none} Disables the selection of text for iOS and Android users. css{- Webkit-user-select:none} Refer to "How to change the appearance of form elements (for WebKit and IE10)" Call to send a text message how to achieve the call   call:0755-10086  texting, Winphone System Invalid   text message: 10086  Write a message, you can refer to the Mobile Web page to send users the method of e-mail  [email protected]Analog button hover effect mobile touch button effect, can express the user some things are going to happen, is a better experience, but there is no mouse pointer on the mobile device, the use of CSS hover does not meet our needs, fortunately there is a active CSS active effect, the code is as follows,

Button

Compatibility ios5+, partial Android 4+, Winphone 8 to be fully compatible, you can control the class name of the button by binding Ontouchstart and Ontouchend

Button

Screen rotation event and style event window.orientation, value: Plus or minus 90 for horizontal screen mode, 0 and 180 for vertical screen mode; window.onorientationchange = function () {switch ( window.orientation) {case-90:case 90:alert ("Horizontal screen:" + window.orientation); Case 0:case 180:alert ("vertical screen:" + window.orientation); Break }} Style//vertical screen style used when @media all and (orientation:portrait) {. css{}}//Horizontal screen when using the style @media all and (Orientation:landscape) {. cs s{}} audio elements and video elements cannot be automatically played in iOS and Andriod: Touch screen is broadcast $ (' HTML '). One (' Touchstart ', function () {Audio.play ()}) can refer to the Audio elements that cannot be played automatically HTML5 Devicemotion: events that encapsulate the motion sensor data can be used to obtain motion acceleration and other data in the mobile phone motion state. Mobile photos and uploading picturesThe Accept Property  Usage Summary: iOS has photos, videos, select local pictures feature part Android only select local image feature Winphone not support input control default appearance ugly browser user resizing the font size page dwarfish, how to prevent users from adjusting the reason Android side is a carbon copy of Layoutinflater to TextView did a unified processing iOS side is modified Body.style.webkitTextSizeAdjust value solution: Android uses the following code, The interface is only valid in the browser (thanks to Jationhuang)/** page to add this code can make the Android machine page no longer subject to user font scaling force change size but there will be a delay of about 1 seconds, the period can be considered through the loading display for reference only */( function () {if (typeof (Weixinjsbridge) = = "undefined") {Document.addeventlistener ("Weixinjsbridgeready", function (e) {SetTimeout (function () {Weixinjsbridge.invoke (' Setfontsizecallback ', {"fontSize": 0}, Function (res) {alert ( Json.stringify (res)); }); },0); }); } else {setTimeout (function () {Weixinjsbridge.invoke (' Setfontsizecallback ', {"fontSize": 0}, Function (res) {alert ( Json.stringify (res)); }); },0); } })(); iOS uses-webkit-text-size-adjust to disable resizing of fonts body{-webkit-text-size-adjust:100%!important;} Best solution: Full page with REM or Percent layout Eliminate Transition splash screen The network is written like this, but I didn't test it out. css{-webkit-transform-style:preserve-3d;-webkit-backface-visibility:hidden;} Turn on hardware acceleration to resolve page flash white to ensure smooth animation. css {-weBkit-transform:translate3d (0, 0, 0); -moz-transform:translate3d (0, 0, 0); -ms-transform:translate3d (0, 0, 0); Transform:translate3d (0, 0, 0); } refer to "Using CSS to turn on hardware acceleration to improve website performance" Cancel input under iOS, enter the default capitalization of the initials in English  Remove the Voice input button on Android Input::-webkit-input-speech-button {Display:none} Android 2.3 bug @-webkit-keyframes need to end with 0% start 100%, 0 Percent percent can not be removed after and before pseudo class cannot use animation animation Border-radius does not support% unit translate percent notation and scale together can cause invalidation, such as-webkit-transform: Translate ( -50%,-50%) scale ( -0.5, 1) Android 4.x bug Samsung Galaxy S4 comes with a browser that does not support Border-radius abbreviations while setting Border-radius and background color, Background color will overflow to some parts of the phone (such as Samsung), a link support mouse: Visited event, that is, the link after the text becomes purple Android can not play the audio reference "Border-radius mobile injury" Several elements of the high-performance CSS3 animation are designed to use synthetic attributes transform and opacity to design CSS3 animations without using position left and top to locate the GPU acceleration reference using Translate3d Performance animations fixed bug iOS fixed element easy to locate error, soft keyboard pop-up, affect fixed element positioning Android under fixed performance is better than iOS, soft keyboard pop-up, will not affect fixed element positioning iOS4 does not support position:fixed solution available isroll.js, no perfect solution Reference "mobile Web page Use position:fixed problem summary" "use Iscroll.js to resolve iOS4 does not support position: Fixed question how to prevent Windows Phone from default touch event Winphone under Default touch events using E.preventdefault is not valid The current workaround is to use a style to disable html{-ms-touch-action: none;} Refer to "Windows Phone 8 touch support" to play video without fullscreen   commonly used mobile end frame zepto.js syntax is almost the same as jquery, will jquery basic will zepto~ the latest version has been updated to 1.16 official website: http://zeptojs.com/Chinese (non-official):/HTTP www.css88.com/doc/zeptojs_api/commonly used extension modules: Browser detection: Https://github.com/madrobby/zepto/blob/master/src/detect.js Tap Event: Https://github.com/madrobby/zepto/blob/master/src/touch.js iscroll.js Resolution page does not support elastic scrolling, does not support fixed problem ~ Pull refresh, slide screen, Zoom and other features ~ The latest version has been updated to 5.0 official website: http://cubiq.org/iscroll-5 underscore.js I did not use, but heard that good, recommend to everyone ~ The library provides a set of functional programming functions, However, no JavaScript built-in objects are extended. The latest version has been updated to 1.8.2 official website: http://underscorejs.org/sliding screen frame for sliding screen, left and right slide screen to switch the effect of the page slip.js islider.js fullpage.js Flex Layout Flex layout can now be used in the mobile, not all the syntax is fully compatible, but the following writing the author has practiced, the effect is good ~. Flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox ;d Isplay:flex;} . Flex-v{-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction: column;} . flex-1{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}. flex-align-center{-webkit-box-align:center;- Webkit-align-items:center;-ms-flex-align:center;align-items:center;} . flex-pack-center{-Webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;} . flex-pack-justify{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify; Justify-content:space-between;} Example: Justify on both sides

Module One module two module three module four

Use note: The child elements under flex must be block-level elements, non-block-level elements under the android2.3 machine Flex failure Reference: flexyboxes "old" Flexbox and "new" Flexbox cross-browser Flexbox Fastclick Eliminate the 300 latency reference between triggering the Click event on a mobile browser and a physical tap (tap) "Fastclick" dry: Front-end e-road, http://www.36zhen.com/my?id=3751 small Guo Plug-in group/HTTP/ www.36zhen.com/t?id=3469
Happy alone
Links: Http://www.imooc.com/article/7517?block_id=tuijian_wz
Source: MU-Class Network

"Super dry" mobile mobile Web Resource integration: Reprint