Question

我有一个像往常一样固定标题的网页：

.header{
position: fixed;
top: 0px;
left: 0px;
width: 100%;
}

页面的主体是1200像素宽的svg图像。在移动设备上，这会使标头扩展到1200px并需要滚动才能查看所有内容。

我希望标题表现为固定标题应该 - 正好是屏幕的宽度，并保持固定 - 无论主体是垂直还是水平滚动，并且最佳，即使它是缩放的。

编辑：我尝试使用100vw代替100%而且效果更好 - 标题不会比屏幕扩展得更宽。但滚动身体时标题仍会滚出网站。

更新：从评论中看，您似乎都没有遇到问题。这是一个用于演示的codepen。如果你在桌面上查看它，它工作正常。但是当我在iphone 5 safari浏览器上查看时，标题会拉伸到图像的宽度。

Answer 1

我通过添加此元标记来解决此问题：

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

用以下内容包装页面：

.bg{
  width: 100%;
  height: 100%;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}