在手机浏览器不工作的div宽度100％的 [英] div width 100 percent not working in mobile browser
问题描述
我试图做一些事情，我想，很简单。一个网站我建立的标题是纯色，需要跨屏幕的整个宽度无论哪个浏览器，它在veiwed的。我已创建至今在台式机和笔记本电脑的工作精彩，但是当我在测试它片剂或移动电话，该标头不跨越一路到右侧。头里面的内容不跨越然而一路，这实在是令人困惑我。我能得到的标题栏到跨越整个宽度的唯一方法是由位置属性设置为静态的，这是不是我需要为这个网站，所以没有我好。下面是CSS和HTML我使用。可能有人来看看它，让我知道我错过了什么。
HTML
＆LT; DIV CLASS =头＆GT;
＆LT; DIV CLASS =容器＆GT;
＆LT; DIV CLASS =头内容＆GT;
....一些内容进去这里....
＆LT; / DIV＆GT; ＆所述;！ - /.header-container - ＆GT;
＆LT; / DIV＆GT; ＆所述;！ - /.container - ＆GT;
＆LT; / DIV＆GT; ＆所述;！ - /.header - ＆GT;
CSS：
HTML，身体{
背景颜色：＃949494;
宽度：100％;
保证金：0像素;
填充：0像素;
}.header {
宽度：100％;
最小宽度：100％;
高度：200像素;
背景颜色：#FFFFFF;
填充顶：8像素;
}。容器 {
宽度：1200像素;
保证金：0汽车;
文本对齐：中心;
}
这发生了什么事对我来说太。重新调整桌面就好了，但由于在我的博客的顶部728px的旗帜上，移动一直在寻找可怕。很难这么小的屏幕上安装一个宽的横幅，而不会造成问题。如果你没有一个旗帜，也许你有一些元素是太宽了，摆脱了设计的其余部分。
这解决了这一问题：＆LT; META NAME =视口CONTENT =WIDTH =设备宽度，初始规模= 0.41，最大规模= 1/＆GT; （这正好在＆LT; HEAD＆GT; ...＆LT; /头＆GT; ）
下初始规模的1.0下来，直到你的元素可以在100％跨页到达所有的方式。这种规模的做我的文字有点小，但Flowtype.js帮助。我可以用一个较小的旗帜去，但我很满意这个解决方案现在。
更新：上述解决方案是不是真的与设备无关。例如，规模化可能会很好看您的手机上，但在平板电脑太小。你可能想这个代替：
＆LT; META NAME =视CONTENT =WIDTH = 800/＆GT;
这使所有设备像一个屏幕的广泛800像素。或任何宽度你的需要。精美的作品在我的Android手机和Nexus平板电脑。我认为桌面浏览器忽略视口设置，由我的罚款。
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.
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;
}
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.
This fixed the problem: <meta name="viewport" content="width=device-width, initial-scale=0.41, maximum-scale=1" /> (This goes in the <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.
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. 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.
这篇关于在手机浏览器不工作的div宽度100％的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
