我正在尝试做一些我认为非常简单的事情。我正在构建的网站的标题是纯色，无论在哪个浏览器中查看，都需要跨越整个屏幕宽度。到目前为止，我创建的内容在台式机和笔记本电脑上运行良好，但是当我在平板电脑或手机，标题不会一直向右延伸。然而，标题中的内容确实跨越了所有方式，这让我感到很困惑。我可以让标题栏跨越整个宽度的唯一方法是将位置属性设置为静态，这不是我需要的这个网站，所以这对我没有任何好处。下面是我正在使用的 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;
}
最佳答案
这也发生在我身上。在桌面上调整大小很好，但由于我博客顶部有一个 728 像素的横幅，移动设备看起来很糟糕。很难在如此小的屏幕上放置宽横幅而不引起问题。如果您没有横幅，可能是您的某些元素太宽了，影响了其余的设计。
这解决了问题:<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 平板电脑上完美运行。我认为桌面浏览器会忽略“视口(viewport)”设置，这对我来说很好。
关于css - div 宽度 100% 在移动浏览器中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22732475/