CSS div 宽度 100% 在移动浏览器中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22732475/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
div width 100 percent not working in mobile browser
提问by DanAdams
I am trying to do something that, I thought, was very simple. The header of a website I am building is a solid color that needs to span the entire width of the screen regardless of which browser it is veiwed in. What I have created so far works wonderful on desktops and laptops, but when I test it on a tablet or a mobile phone, the header does not span all the way to the right. The content inside of the header does span all the way however, which is really confusing to me. The only way I can get the header bar to span the entire width is by setting the position property to static, which is not what I need for this site, so that doesn't do me any good. Below is the CSS and HTML I am using. Could someone take a look at it and let me know what I am missing.
我正在尝试做一些我认为非常简单的事情。我正在构建的网站的标题是纯色，无论它在哪个浏览器中显示，都需要跨越整个屏幕宽度。到目前为止，我创建的内容在台式机和笔记本电脑上运行良好，但是当我对其进行测试时平板电脑或手机，标题不会一直向右延伸。然而，标题中的内容确实跨越了所有的方式，这对我来说真的很困惑。我可以让标题栏跨越整个宽度的唯一方法是将 position 属性设置为静态，这不是我对这个网站所需要的，所以这对我没有任何好处。下面是我正在使用的 CSS 和 HTML。有人可以看看它，让我知道我错过了什么。
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:
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;
}
回答by PJ Brunet
This what was happening to me too. Resizes on the desktop just fine but due to a 728px banner at the top of my blog, mobile was looking terrible. It's hard to fit a wide banner on such a small screen without causing problems. If you don't have a banner, maybe you have some element that's too wide, throwing off the rest of the design.
这也发生在我身上。在桌面上调整大小很好，但由于我博客顶部的 728px 横幅，移动设备看起来很糟糕。很难在这么小的屏幕上放置宽幅横幅而不引起问题。如果你没有横幅，也许你有一些太宽的元素，抛弃了设计的其余部分。
This fixed the problem: <meta name="viewport" content="width=device-width, initial-scale=0.41, maximum-scale=1" />(This goes in the <head>...</head>)
这解决了问题：（<meta name="viewport" content="width=device-width, initial-scale=0.41, maximum-scale=1" />这在<head>...</head>）
Lower the initial-scale down from 1.0 till your elements can reach all the way across the page at 100%. This scale made my text a little too small, but Flowtype.js helped. I could go with a smaller banner but I'm satisfied with this solution for now.
将初始比例从 1.0 降低，直到您的元素可以 100% 到达整个页面。这个比例使我的文本有点太小了，但 Flowtype.js 有所帮助。我可以使用较小的横幅，但我现在对这个解决方案感到满意。
UPDATE: The above solution is not really device independent. For example, the "scale" might look great on your phone but too small on your tablet. You might want this instead:
更新：上述解决方案并非真正独立于设备。例如，“比例”在您的手机上可能看起来不错，但在您的平板电脑上却太小。你可能想要这个：
<meta name="viewport" content="width=800" />
<meta name="viewport" content="width=800" />
This makes all your devices act like a screen that's 800 pixels wide. Or whatever width you need. Works beautifully on my Android phone and Nexus tablet. I think desktop browsers ignore the "viewport" setting, which is fine by me.
这使您的所有设备都像一个 800 像素宽的屏幕。或者你需要的任何宽度。在我的 Android 手机和 Nexus 平板电脑上完美运行。我认为桌面浏览器会忽略“视口”设置，这对我来说很好。
回答by JJD
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<head>
回答by Satwik Nadkarny
I haven't tested this out on tablet or a mobile phone, but I think the problem is in setting a fixed width to the "container" div. Since you have set 100% width for html, body and the header div, these will always occupy 100% of the width irrespective of whether it is a browser, a tablet or a mobile phone. However, this is not the case with the "container" div as it has a fixed width. Try resetting the width of the "container" div in this manner:
我还没有在平板电脑或手机上对此进行过测试，但我认为问题在于为“容器”div 设置了固定宽度。由于你已经为 html、body 和 header div 设置了 100% 的宽度，因此无论是浏览器、平板电脑还是手机，这些都将始终占据 100% 的宽度。但是，“容器”div 不是这种情况，因为它具有固定的宽度。尝试以这种方式重置“容器”div 的宽度：
.container {
width: inherit;
margin: 0 auto;
text-align: center;
}
回答by Chris
Building on PJ Brunet's answer, I had a similar styling problem, but wasn't getting enough versatility from changing the meta tags in the html head. Instead, I added minimum width values in pixels to the css. Using the original question as an example:
基于 PJ Brunet 的回答，我有一个类似的样式问题，但没有通过更改 html 头中的元标记获得足够的多功能性。相反，我在 css 中添加了以像素为单位的最小宽度值。以原始问题为例：
.header {
/* restrict the smallest device size to this width */
min-width: 475px;
height: 200px;
background-color: #ffffff;
padding-top: 8px;
}
Then you can target the next conventionally sized device:
然后您可以定位下一个常规尺寸的设备：
@media (min-width:641px) {
.header {
/* force devises with a smaller width to observe this style */
min-width: 700px;
}
}
Maybe not the best practice, but it will allow you to capture all devise sizes into more manageable groups to suit the the design.
也许不是最佳实践，但它可以让您将所有设计尺寸捕获到更易于管理的组中以适应设计。
回答by Mathew
You can also give min-width to body. Something like body {width: 1200px;}, depending on your width settings. Some clients might want the exact copy of desktop in their mobile!.
您还可以为 body 提供 min-width。像 body {width: 1200px;} 之类的东西，取决于你的宽度设置。一些客户可能希望在他们的移动设备中拥有桌面的精确副本！
