我认为我想做的事情很简单。我正在构建的网站的标题是单色的，无论使用哪种浏览器，它都需要跨越屏幕的整个宽度。到目前为止，我创建的内容在台式机和笔记本电脑上都很好用，但是当我在其上进行测试时在平板电脑或手机上，标题不会一直覆盖到右侧。标头中的内容确实涵盖了所有方面，这确实让我感到困惑。我可以使标题栏跨越整个宽度的唯一方法是将position属性设置为static，这不是我需要的该站点，因此对我没有任何好处。以下是我正在使用的CSS和HTML。有人可以看看它，让我知道我在想什么。
HTML：
<div class="header">
<div class="container">
<div class="header-content">
....Some Content goes in here....
</div> <!-- /.header-container -->
</div> <!-- /.container -->
</div> <!-- /.header -->
CSS：
html, body {
background-color: #949494;
width: 100%;
margin: 0px;
padding: 0px;
}
.header {
width: 100%;
min-width: 100%;
height: 200px;
background-color: #ffffff;
padding-top: 8px;
}
.container {
width: 1200px;
margin: 0 auto;
text-align: center;
}
这也发生在我身上。在桌面上调整大小就可以了，但是由于我的博客顶部有一个728px的横幅，移动设备看起来很糟糕。很难在不引起问题的情况下在如此小的屏幕上放置宽幅横幅。如果您没有横幅，则可能是您的某些元素太宽，无法进行其余的设计。
这样就解决了问题：（<meta name="viewport" content="width=device-width, initial-scale=0.41, maximum-scale=1" />在中<head>...</head>）
将初始比例从1.0降低到您的元素可以100％遍及整个页面。这种比例使我的文字有点太小，但Flowtype.js有所帮助。我可以选择较小的横幅，但现在我对这种解决方案感到满意。
更新：上面的解决方案不是真正独立于设备。例如，“刻度”在您的手机上看起来不错，但在平板电脑上却太小。您可能需要这样做：
<meta name="viewport" content="width=800" />
这使您所有的设备都像800像素宽的屏幕一样工作。或您需要的任何宽度。在我的Android手机和Nexus平板电脑上均可完美运行。我认为桌面浏览器会忽略“视口”设置，这对我来说很好。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句