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

【问题标题】：Position fixed 100% isn't viewport width when a bigger div is present on the page当页面上存在较大的 div 时，位置固定 100% 不是视口宽度
【发布时间】：2015-04-08 16:30:59
【问题描述】：

我有一个场景，我有一个固定的页眉，它应该是视口宽度的 100%，以及一个大约 5000 像素宽并在页眉下方滚动的更大元素。

似乎有几个问题，移动浏览器没有修复标题，而是显示更大（比率计算？？）标题，在 iOS 上滚动速度较慢，并且在滚动位置超过标题宽度时突然跳转安卓。

对标头使用 100vw 有效，但有时标头会在某个断点处消失，并且似乎不是真正固定的位置。

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

任何帮助将不胜感激！

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

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

【问题讨论】：

标签： android ios css mobile viewport

【解决方案1】：

user-scalable 键的值应为 yes 或 no，而不是 1 或 >0.

例如

<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

【讨论】：