Mobile Web Development Practices

The rapid development of mobile devices has brought great convenience to users. Users can easily access the Internet using Android, iphone and other mobile devices. Mobile devices on the performance requirements of the Web page is relatively high, the following talk about mobile web development of some experience.

Viewport

When you use the iphone to access a website that is not optimized for mobile devices (preferably a 960px wide Web site), you'll find that the iphone is just showing the entire page, but the page is zoomed out a lot and the fonts are very small. This is actually sarari the default to treat themselves as a 980px width, and all the iphone (vertical screen) The true width of 320px, in fact, almost all mobile devices have similar situation, the iphone please refer to the iphone 5 Display Size and Web Design Tips. This involves the concept of viewport.

Viewport is the browser's viewable area, but also the width of the browser, the problem on the PC is relatively simple, the width is how much, but on the mobile device, the browser tries to show the entire page, so it will viewport value is not accurate situation, For example, the above mentioned safari from the iphone to get to the width is 980px (the browser can only get the width from the system), so we have to do the first thing is the browser with the real width to parse the page, the code is as follows:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

"Width=device-width" means that the browser uses its own true width, such as the iphone above is 320px,initial-scale=1.0 means no scaling by default. For more information about viewport, see: Using the Viewport meta tag to control layout on mobile browsers

Add: The device pixel is not equal to the CSS pixels, for example the user enlarges the page 300%,css pixel also enlarges 300%, but the device pixel certainly does not have the change. Many devices in order to ensure good browsing effect, usually tell the browser a false resolution, such as IPHONE5S device resolution is 640x1136, but tell the browser its resolution is 320x568 (site to add width=device-width, otherwise is 980 width ), otherwise really to 640x1136 on that point screen to browse the page must be myopic.

Responsive design

Mobile devices have a wide range of resolutions, which requires us to display them well on all devices, and responsive design is a great solution. Bootstrap and other frameworks are known as mobile first, of course, the drawback is that the file is relatively large, if the site is relatively simple, you can write your own percentage. For more responsive Design please refer to: Introduction to responsive design

Picture accuracy

Now the new phone configuration is relatively high, most of the phone's pixel ratio (devicepixeratio) is more than the 1,iphone Retina screen pixel ratio of 2,nexus5 pixel ratio is 3. A screen with high pixel proportions must have a picture of HD, so the display is good, such as the iphone5s's vertical screen width is 320px, but only images with 640px width can be displayed perfectly. Our development experience is the picture to iphone5s as the standard processing, is in the iphone5s above must be high-definition display, other large anroid equipment adaptive processing. You can refer to: Move WEB--CSS to replace images for retina screens

Performance-related

• Zepto.js

  jquery is very powerful, but its size is larger, even the 2.x compression version has 82KB. Zeptojs is known as the mini-version of jquery, compatible with most of the jquery API, its size is only 24KB, because it only supports mobile browsers, all small size, fast.

• Lazy load

  For mobile Web pages, the real consumption of traffic should be part of the picture, because the picture is usually larger, so we can use lazy load to load only the current screen image, because the user often just look at the current screen content to jump to the next page, It's not necessary to load all the pictures at once.

• Other

  To improve performance and reduce download traffic, we can compress merged css,js files, compress images, merge icons, and so on.

HTML5 & CSS3

Browsers on mobile devices are relatively new browsers and basically support the new features of HMTL5 and CSS3, so we should use them more. At the very least, we can use the CSS3 fillet effect to replace the picture. Some of the most useful CSS3 features are listed below.

• Rem

  CSS commonly used px, pt as font units, but their disadvantage is that they are absolute, percent (%) and EM as the font unit size, their values are determined by the font size of their parent element, the advantage is that its value is dynamic, the disadvantage is because each element's parent element's font size is different, So the size of each EM is not the same, eventually resulting in a unified set font size.

  REM, relative to percent and EM, is relative to the root element's font size rather than the parent element, so that any element that uses REM as its unit is the same as its reference unit. This allows us to uniformly control the font size of the entire page.

  Please refer to: CSS3 rem Setting font size

• Animation

  We usually use JS to achieve animation, such as jquery animation (), but JS performance compared to the original CSS3 animation is much worse, so can use CSS3 implementation of the animation with CSS3 implementation.

Reference documents

• Responsive Design Introduction
• CSS3 rem Setting font size
• CSS3 rem Setting font size