div宽度100％无法在移动浏览器中使用
[英]div width 100 percent not working in mobile browser
问题描述
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. 我可以让标题栏跨越整个宽度的唯一方法是将position属性设置为static，这不是我对此站点所需要的，所以这对我没有任何帮助。 Below is the CSS and HTML I am using. 下面是我正在使用的CSS和HTML。 Could someone take a look at it and let me know what I am missing. 有人可以看看它，让我知道我错过了什么。
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;
}
5 个解决方案
解决方案1
20 已采纳 2014-06-04 10:04:21
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. 在桌面上调整大小很好，但由于我博客顶部的728px横幅，移动设备看起来很糟糕。 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. 如果你没有横幅，也许你有一些太宽的元素，抛弃了设计的其余部分。
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%. 将初始比例从1.0降低到您的元素可以100％完全覆盖整个页面。 This scale made my text a little too small, but Flowtype.js helped. 这个比例使我的文字有点小，但Flowtype.js帮了忙。 I could go with a smaller banner but I'm satisfied with this solution for now. 我可以选择一个较小的横幅，但我现在对这个解决方案很满意。
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" />
This makes all your devices act like a screen that's 800 pixels wide. 这使您的所有设备都像800像素宽的屏幕。 Or whatever width you need. 或者你需要的任何宽度。 Works beautifully on my Android phone and Nexus tablet. 在我的Android手机和Nexus平板电脑上运行得非常漂亮。 I think desktop browsers ignore the "viewport" setting, which is fine by me. 我认为桌面浏览器会忽略“视口”设置，这对我来说很好。
解决方案2
9 2015-01-13 14:58:54
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<head>
解决方案3
1 2014-03-29 14:56:51
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. 我没有在平板电脑或手机上测试过这个，但我认为问题在于为“容器”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. 由于您为html，body和标题div设置了100％宽度，因此无论是浏览器，平板电脑还是手机，这些都将占据宽度的100％。 However, this is not the case with the "container" div as it has a fixed width. 但是，“容器”div不是这种情况，因为它具有固定的宽度。 Try resetting the width of the "container" div in this manner: 尝试以这种方式重置“容器”div的宽度：
.container {
width: inherit;
margin: 0 auto;
text-align: center;
}
解决方案4
0 2016-02-29 18:44:04
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. 基于PJ Brunet的回答，我有类似的样式问题，但是没有通过更改html头中的元标记获得足够的多功能性。 Instead, I added minimum width values in pixels to the css. 相反，我将最小宽度值（以像素为单位）添加到css中。 Using the original question as an example: 以原始问题为例：
.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. 也许不是最佳实践，但它可以让您将所有设计尺寸捕捉到更易于管理的组中以适应设计。
解决方案5
0 2016-12-05 15:34:58
You can also give min-width to body. 你也可以给身体最小宽度。 Something like body {width: 1200px;}, depending on your width settings. 类似于body {width：1200px;}，具体取决于您的宽度设置。 Some clients might want the exact copy of desktop in their mobile!. 有些客户可能想要在他们的手机中使用精确的桌面副本！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.