Position fixed 100% isn't viewport width when

2019-05-14 07:09发布

站内文章 / Android
21 0 0

问题:

I have a scenario where I have a fixed page header, which should be 100% of the viewport width, and a bigger element that is around 5000px wide and scrolls underneath the header.

There seems to be several problems with mobile browsers not fixing the header and instead displaying a bigger (ratio calculated??) header which scrolls slower on iOS, and suddenly jumps when past the width of the header in terms of scroll position on android.

Using 100vw for the header works, but then sometimes the header disappears at a certain breakpoint, and doesn't seem to be truly fixed positioned.

Essentially the problem seems to be that a fixed element 100% != 100% of the viewport, i.e. 320px, but a calculated width that is somewhere in between the width of the viewport and the bigger element.

Any help would be massively appreciated!

A simplified code example is as follows...

<!html>

<html>

    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>

        <style>
        * {
            margin: 0;
            padding: 0;
        }

        .a-div {
            position: fixed;
            width: 100%;
            height: 100px;
            z-index: 1;
            background: dimgray;
            border-left: 1px solid red;
            border-right: 1px solid pink;
        }

        .parent {
            width: 5000px;
            overflow: hidden;
        }

        .another-div {
            position: relative;
            width: 1%;
            height: 100vh;
            float: left;
            background: #5f9ea0;
        }

        .another-div:nth-child(even) {
            background: #add8e6;
        }
        </style>
    </head>

    <body>
        <div class="a-div"></div>

        <div class="parent">
            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>

            <div class="another-div"></div>
        </div>

    </body>
</html>

回答1:

The user-scalable key should have yes or no as its value, not 1 or 0.

e.g.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

References: Safari Supported Meta Tags, Chrome Revision 154568, Some guy on Github



标签： android ios css mobile viewport
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~