Mobile-side web Solutions

Category

A mobile-side web browser. At least need to adapt, UC,QQ, each mobile phone built-in browser, Chrome,safari.

Do you feel the same as the PC side? Wrong! The same built-in browser for each version of iOS. But each of the different brands of Android's built-in browser has a lot of detail differences (each mobile operator calls it an optimized system). Besides, there are different versions of each browser. So the mobile web pit is far more than the PC side. This is why it has n multiple auxiliary libraries.

The advantage is that its support for css3,h5 far better than the PC side.

Solution Solutions

　　

Analysis

Native load

<script> tag list, before body end tag

Modular Loading

Requirejs/seajs. The former is AMD. Latter cmd.

Actually, the two are similar. are used to do dependency management. You can use whichever you look pleasing to the eye. Both similarities and differences look here.

Note that if you want to package, do not use aliases.

Routing

　　　　Use

Change URLs are not refreshed, and the corresponding content is rendered via URLs.

Implementation PrincipleHTML4 Hash Method #aaa---> Change hash---> Monitor hashchange---> page forward---> Render page HTML5 state method Pushsta Te changes the URL (usually plus hash)---> Monitor popstate event---> Trigger when page forward backward---> render page does not support Hashchange event?                Settimeout/setinterval 10ms Scan Hash change. H5 state old phone does not support how to do? Gracefully downgrade to H4 hash notation. Compatibility is not good how bad? 　　　　The same can only be done with timed scans. The backbone routing is also based on this principle. Composed of the history and router two objects. Fastclick.js 　　　　 causeThe Click event has a 300ms delay. The touchstart/touchend is triggered when scrolling. (The old version of Zepto/jquery.mobile's Tap event will also be perspective).AnalysisWhy does the Click event have a 300ms delay? There is a translucent red overlay on the B element and a clickable link C within the Yellow B element. Click A,touchstart to execute, a disappears. After 300ms, execute the B click event.Implementation PrincipleDelay issue: Unregisters the native click event.                 After the Touchstart,touchend event, the custom class Click event is thrown by the coordinates to determine whether the class click event is a. Perspective problem: Block browser default processing via E.preventdefault ()NoteMeta set User-scalable=no or Touch-action CSS properties (IE10 support only), click there is no delay. Fastclick will also be judged on this.usage 　　　　　　

" Load " , function () {    false );

　　Hammer.js　

Gesture events. The reason is the native  getsture event Gesturestart, Gesturemove, Gestureend. Compatibility issues are very serious.

Iscroll5.js 　　　 causeScrolling is not smooth (iOS has been optimized, such as-webkit-overflow-scrolling:touch;); there are no scroll bars, and the odd problem with fixed and scroll bars.usage 　　　　

　　　　　　　　　　　　   var iscroll = new Iscroll (DOM, {scrollx:true,//uses a horizontal scroll bar scrolly:false,//does not use a vertical scrollbar click:false,// Do not allow click Preventdefaultexception: {tagname:/^ (a|input) $/}//let a input tag clickable});//scroll to the specified element el in 400ms Offset to left 10 pixels iscroll.scrolltoelement (el,400,10)  //Let scroll area content scroll to x/y position within a specified time ScrollTo (x, Y, time, relative) Iscroll.scrollto (0,100,400);    100ms Scroll down 400px. If relative is set to true, it is up.

Note 　　　　 Mobile-friendlyIscroll-lite.js. (around 5K after compression) it only supports basic scrolling. such as scrolling to an element. The scrolling event needs to be handled, and the Onscroll event needs to be added in. Animate.css 　　　　 principleCSS3 Transitions, animationsusageAdd the class style that it provides. Add class/id yourself to adjust the style example Enquire.js 　　　　 principleUsing native Matchmedia () method to handle JS's responsive layoutusage

            // enquire.register ("screen and (             max-width:750px)" at less than 500px  , [            //matchmatching, unmatch mismatch                {match:function () {Console.log (" Handler 1 matched " ); }},                {match:function () {Console.log ("handler 2 matched");}            ] );

ZeptoDom Library, the reason for recommending it is that it is smaller than jquery.mobile.　　　　　Basically use HTML5,CSS3 reason. Note: Its custom events support only the DOM.　　　　　The reason for this is that it is creating class event events and then dispatchevent. Can see my analysis of its source code.  　　　　　　

　　

　　

　　

Mobile-side web Solutions