修复了手机上的标头，带有超大页面主体

Question

我有一个带有固定标头的网页，例如通常：

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

页面的主体是1200px宽的SVG图像。在移动设备上，这使标头延伸至1200px，并且需要滚动以查看所有内容。

我希望标题以固定的标头表现 - 完全是屏幕的宽度，并保持固定 - 无论主体是否垂直或水平滚动，即使将其放大，也可以最佳地滚动。

编辑：我尝试使用100vw而不是100%，并且效果更好 - 标头不超过屏幕。但是，滚动身体时，标头仍滚出现场。

更新：在注释中，看起来大家都没有遇到问题。这是一个可以证明的代码蛋白。如果您在桌面上查看它，则可以正常工作。但是，当我在iPhone 5 Safari浏览器上查看它时，标题将伸展到图像的宽度。

http://codepen.io/life4ants/full/lwybqz/

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;
}