Question

我想做的事情，我想，非常简单。我正在构建的网站的标题是一种纯色，需要跨越屏幕的整个宽度，无论它被浏览的是哪个浏览器。到目前为止，我创建的内容在台式机和笔记本电脑上都很棒，但是当我测试它时平板电脑或手机，标题不会一直向右。标题内的内容确实跨越了一切，这对我来说真的很困惑。我可以让标题栏跨越整个宽度的唯一方法是将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;
}

Answer 1

这也发生在我身上。在桌面上调整大小很好，但由于我博客顶部的728px横幅，移动设备看起来很糟糕。在如此小的屏幕上放置宽横幅而不会造成问题是很困难的。如果你没有横幅，也许你有一些太宽的元素，抛弃设计的其余部分。

这解决了问题：<meta name="viewport" content="width=device-width, initial-scale=0.41, maximum-scale=1" />（这在<head>...</head>）

将初始比例从1.0降低到您的元素可以100％完全覆盖整个页面。这个比例使我的文字有点小，但Flowtype.js帮了忙。我可以使用较小的横幅，但我现在对此解决方案感到满意。

更新：上述解决方案并非真正与设备无关。例如，＆＃34; scale＆＃34;可能在您的手机上看起来很棒但在平板电脑上却太小你可能会想要这个：

<meta name="viewport" content="width=800" />

这使您的所有设备都像800像素宽的屏幕。或者你需要的任何宽度。在我的Android手机和Nexus平板电脑上运行得非常漂亮。我认为桌面浏览器会忽略＆＃34; viewport＆＃34;设置，这对我很好。

Answer 2

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<head>

Answer 3

我没有在平板电脑或手机上测试过，但我认为问题在于为“容器”div设置固定宽度。由于您为html，body和标题div设置了100％宽度，因此无论是浏览器，平板电脑还是手机，这些都将占据宽度的100％。但是，“容器”div不是这种情况，因为它具有固定的宽度。尝试以这种方式重置“容器”div的宽度：

.container {
    width: inherit;
    margin: 0 auto;
    text-align: center;
}

Answer 4

基于PJ Brunet的回答，我有类似的样式问题，但是没有通过更改html头中的元标记获得足够的多功能性。相反，我将最小宽度值（以像素为单位）添加到css中。以原始问题为例：

.header {
  /* restrict the smallest device size to this width */
  min-width: 475px;
  height: 200px;
  background-color: #ffffff;
  padding-top: 8px;
}

然后，您可以定位下一个常规大小的设备：

@media (min-width:641px) {
    .header {
      /* force devises with a smaller width to observe this style */
      min-width: 700px;
    }
}

可能不是最佳做法，但它可以让您将所有设计尺寸捕捉到更易于管理的组中以适应设计。

div宽度100％无法在移动浏览器中使用

4 个答案: