我有一个场景，我有一个固定的页眉，它应该是视口(viewport)宽度的 100%，还有一个更大的元素，大约 5000 像素宽并在页眉下方滚动。
移动浏览器似乎有几个问题，没有修复标题，而是显示更大(计算比率？？)的标题，在 iOS 上滚动速度较慢，并且在滚动位置超过标题宽度时突然跳转安卓。
标题使用 100vw 是可行的，但有时标题会在某个断点处消失，并且似乎并没有真正固定位置。
本质上，问题似乎是固定元素 100% != 100% 的视口(viewport)，即 320 像素，但计算出的宽度介于视口(viewport)宽度和较大元素之间。
如有任何帮助，我们将不胜感激!
一个简化的代码示例如下...
<!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>
最佳答案
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
关于android - 当页面上存在更大的 div 时，位置固定 100% 不是视口(viewport)宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29520335/