Question

我有一个场景，我有一个固定的页面标题，它应该是视口宽度的100％，一个更大的元素，大约5000px宽，并在标题下方滚动。

移动浏览器似乎有几个问题没有修复标题，而是显示一个更大的（比率计算??）标题，它在iOS上滚动得更慢，并且在滚动位置方面突然超过标题的宽度时跳转机器人。

使用100vw作为标题可以工作，但有时候标题会在某个断点处消失，而且似乎并没有真正固定定位。

基本上问题似乎是固定元素100％！=视口的100％，即320px，但计算出的宽度介于视口宽度和较大元素之间。

任何帮助都会受到大力赞赏！

简化的代码示例如下......

<!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>

Answer 1

用户可扩展键的值应为是或否，而不是 1 或 0

e.g。

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

参考文献：Safari Supported Meta Tags， Chrome Revision 154568， Some guy on Github

当页面上存在较大的div时，位置固定为100％不是视口宽度

1 个答案: