Experiences in webApp Development (Mobile front-end)

# WebApp development experiences (Mobile front-end) # preface this article aims to record my experiences in Mobile webApp development. Please share with me and correct me. # Goodbye, IE678 mobile devices. Android and iPhone are the mainstream devices. Even win8 devices come with IE10 and above, and we will never see the browser that does not follow W3c's instructions, A lot of compatibility problems can be solved, so you can focus on your business. # HTML5, CSS3HTML5, and CSS3 are already very popular on mobile devices, so you no longer have to consider whether there were old browsers on the desktop devices. HTML5 is cross-platform, easy to maintain, and has low development costs. Its various advantages make it widely used on mobile devices. The emergence of phonegap and other hybrid frameworks also makes up for the shortcomings of webapp and has a broad prospect. # A Basic meta attribute <meta content = "width = device-width, initial-scale = 1.0 "name =" viewport "> make the page width consistent with the device width and disable scaling, which greatly reduces the design cost of web development, and make the web page display effect appropriate. # Emulation is a powerful tool for developing the chrome simulator. First, complete most development and preliminary testing on the desktop, and then test it on a dedicated device. # DevicePixelRatio this is an important parameter when designing a webApp page. The following window. devicePixelRatio is the ratio of physical pixels on the device to device independent pixels (dips. The formula is: window. devicePixelRatio = physical pixel/dips. Taking Samsung GALAXY Note 2 as an example, we can quickly find this device in the chrome simulator! [Samsung GALAXY Note 2] ( http://images.cnitblog.com/i/84053/201405/242050294347837.jpg ) The mobile phone has a horizontal physical pixel of 720 and a vertical physical pixel of 1280. However, because devicePixelRatio is 2, that is, two pixels are used to represent the content of the original pixel, the entire screen uses four physical pixels to represent the content of one pixel, in order to make the image display more realistic. For developers, we need to fill in the content. Therefore, we need to set the horizontal width to '20px/2 = 360px 'and the vertical width to '640px ', the developed page is displayed on this device normally. # Hover & touch no longer has hover and starts to focus on touch. There is little development experience, so I will try again later.