Mobile Web Development Practices

The rapid development of mobile devices has brought great convenience to users. Users are very easy to access the Internet using Android, iphone and other mobile devices.

Mobile devices have higher performance requirements for Web pages. Here are some tips on mobile web development.

Viewport

When you use the iphone to access a site that is not optimized for mobile devices (preferably a 960px-wide site). You will find that the iphone is able to display the entire page, but the page has shrunk a lot. The font size is small. This is actually Sarari by default as a 980px width to deal with, and all the iphone (vertical screen) of the true width of 320px, in fact, almost all mobile devices have similar situation, iphone please refer to the iphone 5 Display Size and Web Design Tips. This involves the concept of viewport.

Viewport is the viewable area of the browser, the width of the browser, the problem on the PC is relatively simple, the width is how much. However, on the mobile device, the browser tries to display the entire page, so the viewport value is inaccurate. For example, the above mentioned safari from the iphone to get the width is 980px (the browser can only get the width from the system). So the first thing we want to do is to have the browser parse the page with its true width, such as the following code:

<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.

About viewport Many other references: Using the viewport meta tag to control layout on mobile browsers

Add: The device pixel is not equal to the CSS pixels, such as the user Magnified page 300%. CSS pixels are also magnified by 300%, but the device pixels will certainly not change. Very many devices in order to ensure good browsing effect, will generally 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. This requires that we be able to display it very well on all devices. Responsive design is a great way to solve this problem. Bootstrap and other frameworks are known as mobile first, of course, the disadvantage is that the file is larger, assuming that the site is simpler than the words can write their own percentage can be. A number of other responsive designs are invited: Introduction to responsive design

Picture accuracy

Now the new mobile phone configuration is relatively high, most of the cell phone pixel ratio (devicepixeratio) is more than the 1,iphone Retina screen pixel ratio of 2,nexus5 pixel ratio of 3.

High pixel ratio screen will need to have HD pictures, so that the display effect is good, for example, iphone5s vertical screen width of 320px, but only the use of 640px width of the picture talent perfect display.

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 device adaptive processing.

Ability to reference: Move WEB--CSS to replace images for retina screens

Performance-related

• Zepto.js

  jquery is powerful. But it's bigger than the size. Even the compressed version of 2.x has 82KB.

  Zeptojs is known as the mini-version of jquery, compatible with most jquery APIs. Its size is only 24KB, because it only supports the mobile browser, all small size, fast.

• Lazy load

  For mobile Web pages. The actual consumption of traffic should be part of the picture. Since images are usually larger, we can use lazy load to simply load images from the current screen. The user jumps to the next page just by looking at the contents of the current screen very often. There is no need to load all the pictures in one time.

• Other

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

HTML5 & CSS3

Browsers on mobile devices are newer browsers that 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 useful CSS3 features are listed below.

• Rem

  CSS often uses PX, pt as the font unit. But their disadvantage is that they are absolute values. Percent (%) and EM as font units are sized, their values are determined by the font size of their parent element, and the advantage is that its value is dynamically variable. The disadvantage is that each element's parent element's font size is different, so the size of each EM is different. Finally led to the uniform setting of the font size.

  and REM is relative to percent and EM. It is relative to the root element's font size rather than the parent element, so that whatever element uses REM as its unit, its reference units are the same.

  This allows us to uniformly control the font size of the entire page.

  Please refer to: CSS3 's rem setting font size

• Animation

  We often use JS to achieve animation, for example, jquery animation (), but JS performance than the original CSS3 animation is much worse. So the animation that can be realized with CSS3 is implemented with CSS3.

Documentation for references

• Introduction to Responsive design
• CSS3 rem Setting font size
• CSS3 rem Setting font size

Mobile Web Development Practices