Like most responsive layouts, webapp development also requires a floating layout and a percentage layout, taking into account the small-screen phone 250px and the big-screen device 768px, but is accustomed to 320px and 640px to split, a word in JQ ( function ( ){
$ (window). Resize (function () {
var iswidescreen=$ (this). width ();
if (iswidescreen<320) {
iswidescreen=320;
}else if (iswidescreen>640) {
iswidescreen=640;
}
var ratio = iswidescreen/320;
$ (". w640"). css ({' font-size ': ratio * 16+ "px"});
}). Trigger (' resize ');
Mobile device width can be detected.
When using the Ovflow-y:scroll property, be aware that it is set to absolute, the excess can be scrolled, before the end of the fixed head, using the fixed property, but not compatible in the Apple phone, and then use the JS dynamic for the elements need to be fixed set top and bottom values, Window.scrolly, found that the mobile phone opened to the head and the tail when the page shake badly; and then in order to solve this problem, the use of ovflow:scroll; Hey, spare a big bend, it's a lesson.
Some notes in the development of WebApp