当页面上存在更大的div时，位置固定为100％不是视口宽度
我有一个场景，我有一个固定的页眉，这应该是100％的视口宽度，一个更大的元素，大约5000像素宽，并滚动标题下。
移动浏览器似乎有一些问题没有修复头，而是显示一个更大的（比率计算??）头在iOS上滚动较慢，并突然跳过超过标题的宽度在android上的滚动位置方面跳转。
标题使用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> 用户可扩展的密钥应该是“是”或“ 否” ，而不是1或0 。
例如
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
参考文献： Safari支持Meta标签 ， Chrome修订版154568 ， Github上的一些人