Mobile web App Development Memo

Recently to make a mobile phone HTML5 page, do some knowledge reserves, important points recorded for follow-up.

1.devicePixelRatio: Defines the ratio of the physical pixel of the device to the independent pixel of the device. The PX in CSS can be regarded as the independent pixel of the device, through Devicepixelratio, we can know how many physical pixels a CSS pixel on the device represents, and consider Devicepixelratio+rem to fit the different devices;

2. Using image object to implement lazy loading of pictures, the main logic code is as follows:

var len = Queue.length;var counter = 0;for (var i = 0; i < len; i++) {var img = new Image (); img.src = Zepto (Queue[i]). dat A ("url"); img.onload = function () {counter++;if (counter >= len) {logic.onloadcomplete ();}}}

Creates a new image object with new image () and then listens for its onload event, which is loaded after loading is complete.

3.zepto.js, designed for mobile web development, is smaller and lighter, with APIs similar to jquery. Chinese manual address: http://www.html-5.cn/Manual/Zepto

Mobile web App Development Memo