First of all, the development model, just beginning to contact, the basic use of web-based development, the current development model has not found the right, and now basically this:
1, the computer Nginx configuration server
3, computers and mobile phones together with a local area network,
2,android root and iphone jailbreak to bind hosts to access the environment of the computer configuration.
However, the Uc,qq browser cache is serious, and the hosts file changes are indifferent. Do not change the file to the external network changes every time, debugging is quite troublesome.
One problem is that some simply do not support fix positioning, which is only compatible with the binding JS Touchmove event.
The most troubling is not fully supported.
The first problem that
encounters is that there cannot be position:relative or absolute elements within the fix-positioned element, and if so, these elements are not constrained by the fixed ancestor element, and are located according to the body. Scroll to the bottom to scroll along with the fixed element. The solution is to remove those positions and switch to other positioning methods.
Another problem fix is positioned, the floating layer of fix does not appear at all, only scroll to the bottom of the display, and then you can normally . This layer is JS dynamic Add, I have tried in js El.style.display = ' None '; el.style.display = ' block '; But without any effect, the final solution is to css sets Display:none; Then dynamically insert body after setting Style.display = ' block '; This problem is resolved.
After solving this problem, there is another problem is that the fix layer can not scroll when the normal click, but after scrolling click on this layer does not respond, this layer will be through as if set: Pointer-eventes:none; Like, click to the next layer of the layer. The workaround for this is that
will add User-scalable=no in viewport:
| The code is as follows |
Copy Code |
<meta name= "viewport" content= "Width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"/> |
Become:
| The code is as follows |
Copy Code |
<meta name= "viewport" content= "Width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0 User-scalable=no "/> |
Well, fix locates basically these:
css resolves IE6, Chrome, FF browser position:fixed, and flashing issues