Analysis of mobile compatibility

Source: Internet
Author: User
Tags css preprocessor

"The size of mobile internet users will reach 500 million by the end of 2013, with a growth rate of 19.1%. It is expected that by 2017, mobile netizens will overtake PC netizens and become the Internet's first large user group, and mobile will become the most important internet channel for netizens. Accelerated penetration of the Internet and universal mobile connectivity are expected to be realized in the next 5 years. In the past few years, mobile smart devices quickly popularized, the configuration quickly increased, many of the past in the PC-side to complete the need to move to the mobile side, resulting in PC-side traffic gradually shifted to the mobile side. In the coming years, many Internet products mobile traffic will be more than the PC end, the entire Internet usage scene has changed dramatically. ”

--"2014 China Mobile Internet Industry annual research Report" from the "2014 China Mobile internet Industry Annual Report" to show us in the future of the internet world, mobile will become the main battlefield, if you want to stand up in the tide, we will start moving to start a new journey. As a front-end engineer, we have enjoyed or are still enjoying the PC end of the various "non-modern" browser "torture", facing the mobile side of what will we face the test of compatibility? Limited space This article will show you our experience with compatibility issues in the mobile development process, including selection and entry basics, if you are Daniel, the great God or the great God, if you are welcome to point, correct, if you are the same as I mobile new birds Welcome to explore joint learning. On the mobile side of the compatibility of the main need to focus on what aspects of the problem, and how to rank it? Due to factors such as device (PC device or mobile device), manufacturer, model, operating system and version, browser and version, mobile compatibility is no exaggeration called "post-IE6 era". How to better present the page to the user in the case of cost, let's take a look at a set of data: The figure shows that the smartphone occupies a share of the common mobile device terminal 95.2%, while the total number of Android and iOS platforms in smartphones is 89%, combined cost, efficiency and overall effect, For the moment, we rated mobile browser compatibility as: Compatible with the mainstream models, systems and browsers of iOS and Android platforms. at present, the cross-terminal solution is divided into two major camps: a set of resources vs two sets of resources. The first is to achieve a set of resources to adapt all the terminals through the response or the page terminal judgment, and the second is to determine two sets of resources to fit all terminals by the terminal. These two ideas we can not categorically say which is more preferred, is the so-called "suitable is the best". Here's a simple comparison of these two ideas: idea one: through response or page terminal judgment to achieve a set of resources to adapt all terminals Advantages:Only one set of resources is maintained and maintenance costs are low. Disadvantages:Need to load the various resources suitable for each terminal, in different terminals through the response layout to achieve different display, some interactive effects need to do terminal judgment in the page, the cost is larger, if the picture resources for a set, some pictures in ultra-high-resolution devices (such as the iphone series) will be distorted, And in the non-wifi situation even if the delay loading is also prone to load slow situation. Technology Selection:jquery (or native JS, etc.) + responsive + front-end Module loader (SEAJS or REQUIREJS, etc.) + CSS preprocessor (sass or less). jquery's better compatibility-fit response can be implemented across terminals at relatively low cost. Front-end Module loader is mainly responsible for loading on demand, in order to improve page loading speed, CSS preprocessor variables, operations, nesting and other characteristics can greatly improve the efficiency of the manual calculation of response, mother no longer worry about my proportion is wrong. Of course, the two can refer to demand and cost to decide whether to adopt. idea two: through the terminal to determine the two sets of resources to adapt to all terminals Advantages:Can be based on the different end of the personality design and personalized information push and can be loaded on demand, such as mobile can be combined with gravity induction, different gestures to do a variety of cool drag effect, PC page can not be limited by the flow of traffic to the effect of PC-side. Disadvantages:Two sets of resources need to be maintained and maintenance costs increased. Technology Selection:Zepto (or XUI-Mobile lightweight framework) + responsive + front-end Module loader + CSS preprocessor + terminal adaptation. Zepto, as a mobile version of jquery, continues its own advantages, greatly optimizing the mobile API and eliminating the redundant code compatible with "non-modern browsers", and becoming a handy JS frame for mobile, which is the perfect choice for students accustomed to jquery! Terminal adaptation is generally achieved by UA judgment. UA judgment can be placed on the server can also be placed on the page, in the proxy servers do jump faster, more accurate and do not go to the application layer, even if the browser is disabled JS can still jump to the corresponding address, while adhering to the public service in the service side of the cloud service concept, we chose to do terminal adaptation through Proxy server. User-agent sniffing, that is, when a Web browser sends a Web page or resource request, a user-agent header is sent as part of the HTTP request, so we can obtain the desired information on the server side and then judge and direct the user to the corresponding page address. Here's how it works by analyzing the user-agent header in an HTTP request in detail: key points and precautions: css pixels and device pixels:The difference is that the former is abstract and used for browser rendering pages, while the latter is the smallest physical unit of the device. Refer to a pixel is not a pixel are not a pixel to understand. Viewport:The mobile browser has two viewports, the visible viewport and the layout viewport, the difference being that the former is based on the actual width of the mobile device screen, and the latter is the size that we define for the page for browser rendering. You can refer to a tale of the viewports for understanding. Media Enquiry:Locate the breakpoint. Responsive Layout:When the context changes, you can consider changing the layout to show elegance. When an element is absolutely positioned out of the document flow, it is relatively highly defined. Responsive Fonts:Font-face will definitely have a huge impact on your station. When the container defines the font unit as EM, be aware of the inheritance, for example: when we define a block-level element "FONT-SIZE:1.5EM; Line-height:2em; " , the actual row height of the line-height is 1.5em*2 3em. Document declaration:Document declaration recommendations with HTML5: <! DOCTYPE Html&gt, which instructs the browser about which HTML version the page uses to write the instructions. You also need to define the viewport information for the document, such as: <meta name= "viewport" content= "Width=device-width, initial-scale=1, User-scalable=no" >width= Device-width tells the browser that the width of the page is equal to the width of the device, Initial-scale=1 tells the browser to initialize the scale 1:1,user-scalable=no prevent the user from scaling the page. Compatibility test:The Debug tool recommends Chrome's simulator plus real-computer testing, and more about debug tools can refer to the Debugging Mobile Web page article. Summary:Mobile opened an era, it is not illusory or unattainable, it has been neglected to render and web standards and other substantive issues more clear, compared to the above two ideas, we are more inclined to do their own thinking clear of the second scenario, we can do different interactive design according to different terminals, visual design , the study of different front-end technology, user experience, the right is better. As a front-end engineer, let us understand the principle, explore the practice, across the terminal is heavy and long way.

Analysis of mobile compatibility

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.