Mobile Web Development Practice--solving position:fixed adaptive bug

The use of position:fixed in the mobile web, will tread a lot of pits, in my previous article "mobile Web page Use position:fixed problem summary" has summed up a lot of bugs, but in the subsequent development of fixed unknown bugs more and more, I'm also trying to find a solution.

This article comes first to solve a hole, the fixed element of the width of adaptive.

When the horizontal screen, the fixed element can not adapt to the width of the horizontal screen, the bug behaves as follows:

This bug is mainly found in Android's own browser, regardless of the phone model and system version, almost all Android is not spared, under different mobile phones may show a little difference, but the same bug.

Cause of the cause of the bug I am not clear, if there is an expert please advise.

The following solution is tested on 12 major mobile phones (Samsung, Xiaomi, Meizu, Huawei, center, etc.) and can respond to this article if not fully resolved.

the key to the problem is that the fixed element must be nested inside an position:absolute element that is used to load the content to get the content out of the fixed document stream, shielding some fixed pits

Do not ask me why, I do not know why, but this writing unexpectedly magically so, if there are tall man please point to the maze.

In the following example, I declare two of the most common fixed elements: header and footer

Position Fixed Header

In the header I used float to locate the left and right icons. The right icon must not use the position:absolute positioning, if the use of absolute, in some Android with the browser in the horizontal screen, the right icon can not be adaptive to the right side, will appear in the second picture above the same bug.

Position fixed Footer

Footer is a flex layout, the ' Display:flex ' container must not be declared directly under the fixed element, and the ' Position:absolute ' container should be used to wrap the layer.

<footer> <div class="fixed"> <div class="wrap flex"> <a href="#"><span class="glyphicon glyphicon-picture"></span></a> <a href="#"><span class="glyphicon glyphicon-film"></span></a> <a href="#"><span class="glyphicon glyphicon-qrcode"></span></a> </div> </div></footer>

Solution Demo:http://jsbin.com/omacosir/latest

Off Topic

A placeholder adaptive bug, the use of tags in the page <input> and attributes placeholder , the page screen and then back to the vertical screen, will cause the page can not be self-adaptive, whether it is Android or iOS will be the recruit.

The solution is to add in the <input> outer container overflow:hidden , this bug I did not, you can self-test.

Transferred from: HTTPS://GITHUB.COM/MAXZHANG/MAXZHANG.GITHUB.COM/ISSUES/11

Mobile Web Development Practice--solving position:fixed adaptive bug