logo标签列表

移动浏览器中div宽度设置为100%无效。

cssmobilebrowserwidth
15

我试图做一件我认为非常简单的事情。我正在构建的网站的页眉是一个需要跨越整个屏幕宽度的纯色块，无论在哪个浏览器中查看。到目前为止，我所创建的工作在台式机和笔记本电脑上都很好，但是当我在平板电脑或移动电话上测试时，标题不会完全延伸到右侧。然而，标题内部的内容确实完全覆盖，这真的让我困惑不已。唯一的方法是将位置属性设置为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;
}
根据您的网站布局情况，这可能对您有所帮助。 - John
我唯一能让标题栏横跨整个宽度的方法是将位置属性设置为静态。静态是该属性的默认值。你的示例代码中是否继承了不同的位置属性？ - Daniel Beck
对不起，丹尼尔。我的意思是说，我唯一能让标题栏跨越整个宽度的方法是将属性设置为“fixed”，而不是“static”。那是我打错字了；我道歉。 - DanAdams
我已经尝试将min-width和max-width都设置为100％，但这并没有帮助。 - DanAdams
5个回答
33

我也遇到了同样的问题。在桌面上可以很好地调整大小，但由于博客顶部有一个728像素的广告横幅，移动端看起来很糟糕。在如此小的屏幕上放置宽横幅很难而不引起问题。如果您没有横幅，也许您有一些元素太宽，从而影响了其他设计。

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

将初始比例缩小到1.0以下，直到您的元素可以以100％的宽度覆盖整个页面。 这种比例会使我的文本变小，但是Flowtype.js 有帮助。 我可以选择较小的横幅，但现在我对此解决方案感到满意。

更新：上述解决方案并不是真正的设备独立的。例如，“scale”在您的手机上可能看起来很棒，但在平板电脑上太小了。 您可能需要尝试这个：

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

这使得所有设备都像具有800像素宽屏幕的屏幕一样工作。或者您需要的任何宽度。 在我的Android手机和Nexus平板电脑上运行得非常好。 我认为桌面浏览器忽略“视口”设置，这对我来说很好。

这对我有用！谢谢。 - Dholu
14
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<head>
2

我还没有在平板电脑或手机上测试过这个，但是我认为问题出在设置“container” div的固定宽度上。因为你已经将html、body和header div的宽度都设置为100％，无论是浏览器、平板电脑还是手机，它们始终占据100％的宽度。然而，“container” div不是这种情况，因为它有一个固定的宽度。尝试按照以下方式重置“container” div的宽度：

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

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

也许不是最佳实践，但它可以让你将所有设备尺寸捕捉到更易于管理的组中，以适应设计。

0

你也可以给 body 设置最小宽度，类似于 body {width: 1200px;}，具体取决于你的宽度设置。一些客户可能希望在移动设备上获得与桌面端完全相同的副本！

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接