我有一个像往常一样带有固定标题的网页:
.header{
position: fixed;
top: 0px;
left: 0px;
width: 100%;
}
页面的主体是一个 1200px 宽的 svg 图片。在移动设备上,这会使标题拉伸(stretch)到 1200 像素并且需要滚动才能查看全部。
我希望 header 的行为与固定 header 一样 - 恰好是屏幕的宽度,并保持固定 - 无论主体是垂直还是水平滚动,最好是,即使它被缩放。
编辑:我尝试使用 100vw
而不是 100%
并且它工作得更好一些 - 页眉不会展开得比屏幕还宽。但是当滚动正文时标题仍然滚出网站。
更新:从评论来看,你们似乎都没有遇到问题。这是一个代码笔来演示。如果您在桌面上查看它,它工作正常。但是当我在我的 iphone 5 safari 浏览器上查看它时,标题被拉伸(stretch)到图像的宽度。
最佳答案
我通过添加这个元标记解决了这个问题:
<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;
}
关于html - 修复了页面正文过大的移动端标题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42731562/