html - 修复了页面正文过大的移动端标题

Question

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

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

页面的主体是一个 1200px 宽的 svg 图片。在移动设备上，这会使标题拉伸(stretch)到 1200 像素并且需要滚动才能查看全部。

我希望 header 的行为与固定 header 一样 - 恰好是屏幕的宽度，并保持固定 - 无论主体是垂直还是水平滚动，最好是，即使它被缩放。

编辑:我尝试使用 100vw 而不是 100% 并且它工作得更好一些 - 页眉不会展开得比屏幕还宽。但是当滚动正文时标题仍然滚出网站。

更新:从评论来看，你们似乎都没有遇到问题。这是一个代码笔来演示。如果您在桌面上查看它，它工作正常。但是当我在我的 iphone 5 safari 浏览器上查看它时，标题被拉伸(stretch)到图像的宽度。

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