1. Background of mobile development 1. global Mobile devices will exceed the total population; 2. the Internet access time on the Mobile End exceeds the Internet access time on the pc end. 3. tablet computers, e-readers, Smart TVs, mobile phones, and other devices download millions of applications every day.
Summary:
In the face of such challenges, it is very important to keep your mind and eyes forward-looking.To achieve continuous success in terms of product share and revenue, product design and development strategies must meet the future development trend of mobile applications.
2 similarities and differences between mobile development and pc development
2.1 performance difference this is the most significant difference. Performance issues, especially power consumption and smoothness issues, have the greatest impact on mobile development.
2.2 The control mode is different from the mouse control mode in PCs. Mobile devices generally use the touch technology. The control mode is different. When page interaction is required
Make good use of touch eventsIncrease user experience.
2.3 screen size the screen size of mobile devices is generally relatively small, and the resolution is diverse.
In this way, you need to do it on the page display
Good compatibility.At the same time
Note the size of the clicked AreaThe layout of buttons with a small size and no space interval can easily lead to misoperations.
2.4 The interaction mode is designed to restrict the screen size of mobile devices and provide users with a larger reading space and immersive experience,
More and more applications use drawer navigation, Advocating "hidden art ".
2.5 The characteristics of the mobile client determines that users are more concerned about traffic consumption. So
Simplify page layout and production as much as possibleTo accelerate page loading and optimize user experience.
3 tips for mobile development
3.1 maintain a simple layout
The Redundant Structure of the screen discard ensures that the page is simple and clean, and the content is clear at a glance. See example: vsco. co/
3.2 Using Medial Queries in simple words, Medial Queries is a media query. You can query the appropriate style based on the set size. The advantage is that you can load a backup style on the Web page based on the current width of the device to implement a specific page style. @ Media screen and (max-width: 300px) {/* Tiny styles */} @ media screen and (max-width: 600px) {/* small styles */}
@ Media screen and (max-width: 900) {/* big styles */}
3.3 define a breakpoint to define a breakpoint.
BreakpointWhat is it? A simple description is the critical point of the device width. in mobile development design, there are six common breakpoints. We can determine the Medial Queries conditions based on these breakpoints in the future.
(1 ). the first breakpoint group is set for smartphones. Its width is smaller than PX; (2 ). the second breakpoint is a smart mobile device, such as an Ipads device. Its width is smaller than 768px; (3 ). add a breakpoint smaller than 320px for small mobile devices; (4 ). you can also add breakpoints larger than 768px and smaller than 1024px for tablet devices.
3.4 make your layout more flexible. The page design can properly use the Fluid layout (that is, the adaptive layout, the liquid layout, and the percentage layout that everyone often says, combined with the correct medial Queries, you can create a page layout suitable for any possible devices.
3.5. Is there any way for an image to be adaptive to display on different devices based on the screen size? There is one way to deal with this effect. If your web page is not affected by the bandwidth (not considering the performance), you can first create an image to make it suitable for the largest screen, you can use styles to control the display size of different devices. You can also prepare different images for each breakpoint.
3.6 check whether your viewport has played mobile terminals. As you may know, many mobile browsers simulate browsers on the desktop PC. When your web pages are viewed in Mobile browsers, the entire page is compressed and displayed on a single screen.
Parameters:Viewport: visible area Width: the width of viewport. Value: device-Width Initial-scale. Value: 1.0 Minimum-scale. Value: 1.0 Maximum-scale: users can zoom in to the maximum ratio. Value: 1.0 User-scalable: whether to allow users to zoom in. The MobileOptimized browser does not automatically adjust the file size, scaling <meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = 0 "> <meta name =" format-detection "content =" telephone = no "> <meta name =" format-detection "content =" email = no"> <meta name = "format-detection" content = "address = no">
4. frontend technologies involved in Mobile Terminals
4.1 html5
SemanticsBetter,
Device compatibilityBetter support for web-side multimedia functions such as Audio and Video, more dazzling effects through simple code, cross-platform use, and so on ...... The powerful Cascading Style Sheet enhanced version of 4.2 css3 can achieve the effect of corner, shadow, color gradient, and so on through simple code, reducing image applications and increasing user experience. 4.3 js Zepto. js. Jquery in Mobile pages, lightweight mobile phone js framework, 9.7 k after Gzip compression, can complete various dom structure operations, ajax requests, touch screen events, and so on. 4.4 responsive layout building tools such as foundation, Ink, grumby, Maxmertkit, and Bootstrap can be used to quickly build adaptive la s that adapt to various screen resolutions. 4.5 Test Tool
Remote debugging tool weinre
Www)
5. Mobile compatibility and Processing
Summary:
1. Resolution compatibility (including layout and breakpoint settings) 2. Image compatibility (mainly reflected in page design and css processing) 3. Navigation settings
Author: Alone
Antroduction: Senior front-end development engineer
Sign: there is no failure in life, only success in life.
