我有一个场景，我有一个固定的页面标题，它应该是视口宽度的 100%，还有一个更大的元素，大约 5000px 宽，并在标题下方滚动。
移动浏览器似乎存在一些问题，没有修复标题，而是显示更大的（计算出的比率？？）标题，该标题在 iOS 上滚动速度较慢，并且在 Android 上滚动位置超过标题宽度时突然跳跃。
对标头使用 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>
The 用户可扩展钥匙应该有yes or no作为它的值，而不是1 or 0.
e.g.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
参考：Safari 支持的元标签 https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html,
,
Github 上的某个人 https://github.com/reddit/reddit/issues/1073
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
