What you should know about "mobile-side compatibility"

The competition on the mobile side is getting worse, and everyone's fragmentation time is more spent on mobile phones and tablets than on PCs. How to control compatibility has become a very important topic for developers to move back and forth between different platforms. Next, see how VC analysis and look at mobile side compatibility ~

The size of mobile internet users will reach 500 million by the end of 2013, at a growth rate of 19.1%. It is expected that by 2017, mobile internet users will overtake PC netizens, become the Internet's largest user group, mobile end will become the most important Internet access channels. The accelerated infiltration of the Internet and the universal mobile interconnection are expected to be implemented in the next 5 years. In the past few years, the rapid popularization of mobile smart devices, the rapid configuration, many of the requirements in the past on the PC can be completed to move to the mobile end, resulting in PC-side traffic is also gradually shifted to the mobile end. In the next few years, many Internet products mobile end of the traffic will be more than the PC end, the entire use of the internet scene has changed dramatically.

--"2014 China Mobile Internet Industry annual research Report"

"2014 China Mobile Internet Industry annual research Report" to show us in the future of the internet world, mobile end will become the main battlefield, if you want to stand in the tide, we will start to move the end, start a new journey.

As a front-end engineer, we enjoy or still enjoy the PC end of a variety of "non-modern" browser "torture", facing the mobile side of what we will face the test of compatibility? Space limit This article will show you our experience in the development of the mobile side for compatibility issues, including program selection and entry basics , if you are Daniel, the great God or the great God ox welcome advice, correct, if you are the same as me mobile end of the new bird Welcome to explore common learning.

On the mobile side of the compatibility of the main need to pay attention to what aspects of the problem, and how it is graded. Mobile-side compatibility is not exaggerated as a "post-IE6 era" because of factors such as devices (PC devices or mobile devices), vendors, models, operating systems and versions, browsers, and versions. How to better present the page to the user when the cost allows, let's look at a set of data first:

Visible from the diagram, smartphones account for 95.2% of the common mobile device terminals, while Android and iOS in smartphones have a combined total of 89%, combined with cost, efficiency, and overall results, we will now rank the compatibility of mobile browsers with the mainstream models compatible with iOS and Android platforms, Systems and browsers.

At present, the scheme is divided into two camps: a set of resources vs two sets of resources. The first one is to implement a set of resources matching all terminals through the response or page terminal judgment; the second one is to transfer two sets of resources to fit all terminals through terminal judgment. These two ideas we can not categorically say which is more preferred, is the so-called "appropriate is the best." Here's a simple comparison of the two ideas:

　　Thought one: Through the response or page terminal judgment to achieve a set of resources suitable for all terminals

Advantages: Just maintain a set of resources, maintenance costs are lower.

Disadvantage: the need to load suitable for each end of each resource, in different terminals through the response layout to achieve different shows, part of the interactive effect needs to do in the page terminal to judge, the cost is greater, if the picture resources for a set, some pictures in the ultra-high resolution equipment (such as the iphone series) will be And in the non-wifi situation, even if the delay loading is easy to load slow.

Technology selection: jquery (or native JS, etc.) + response + Front-End module loader (SEAJS or REQUIREJS, etc.) + CSS preprocessor (sass or less, etc.). jquery's better compatibility response can achieve cross terminals with relatively low cost. The front-end module loader is mainly responsible for loading on demand, in order to improve the page loading speed, CSS preprocessor variables, operations, nesting and other characteristics can greatly improve the efficiency of manual calculation response, Mom no longer have to worry about my proportion is wrong. Of course, the two can refer to the demand and cost decision whether to use.