Html "background-size: cover" 不覆盖手机屏幕
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13659204/
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
"background-size: cover" does not cover mobile screen
提问by Vitaliy G.
I have a photo background on my site using background-size:cover. It works for the most part but leaves a weird ~30px white space on my Galaxy S3 in portrait mode.
我的网站上有一张照片背景，使用background-size:cover. 它在大多数情况下都有效，但在我的 Galaxy S3 纵向模式下会留下一个奇怪的约 30 像素的空白空间。
I've attached a screenshot. The 1px teal line is to illustrate the entire screen. Seems like the background stops right after the social media uls.
我附上了截图。1px 青色线用于说明整个屏幕。似乎背景在社交媒体之后就停止了ul。
I tested this by removing the uland the background attached it self to the bottom of the tagline text.
我通过删除ul和背景将它自己附加到标语文本的底部来测试这一点。
Also, here's my CSS pertaining mobile portait view:
另外，这里是我的 CSS 与移动 portait 视图有关：
@media only screen and (max-width: 480px) {
.logo {
position: relative;
background-size:70%;
-webkit-background-size: 70%;
-moz-background-size: 70%;
-o-background-size: 70%;
margin-top: 30px;
}
h1 {
margin-top: -25px;
font-size: 21px;
line-height: 21px;
margin-bottom: 15px;
}
h2 {
font-size: 35px;
line-height: 35px;
}
.footer_mobile {
display: block;
margin-top: 20px;
margin-bottom: 0px;
}
li {
display: block;
font-size: 1.3em;
}
This used to not happen, but I guess I accidentally bugged it while trying to solve another issue.
这过去不会发生，但我想我在尝试解决另一个问题时不小心弄错了它。
回答by Vitaliy G.
After hours of trying different things, adding min-height: 100%;to the bottom of htmlunder the { background:... }worked for me.
经过数小时的尝试不同的事情，在为我工作min-height: 100%;的情况html下添加到底部{ background:... }。
回答by bit-less
This works on Android 4.1.2 and iOS 6.1.3 (iPhone 4) and switches for desktop. Written for responsive sites.
这适用于 Android 4.1.2 和 iOS 6.1.3 (iPhone 4) 和桌面开关。为响应式网站编写。
Just in case, in your HTML head, something like this:
以防万一，在你的 HTML 头中，像这样：
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
HTML:
HTML：
<div class="html-mobile-background"></div>
CSS:
CSS：
html {
/* Whatever you want */
}
.html-mobile-background {
position: fixed;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 125%; /* To compensate for mobile browser address bar space */
background: url(/images/bg.jpg) no-repeat;
background-size: 100% 100%;
}
@media (min-width: 600px) {
html {
background: url(/images/bg.jpg) no-repeat center center fixed;
background-size: cover;
}
.html-mobile-background {
display: none;
}
}
回答by Francis Kim
Galaxy S3 havs a width of greater than 480px in either portrait or landscape view so I don't think those CSS rules will apply. You will need to use 720px.
Galaxy S3 在纵向或横向视图中的宽度都大于 480 像素，因此我认为这些 CSS 规则不适用。您将需要使用 720 像素。
Try add:
尝试添加：
* { background:transparent }
right at the end & move your html { background:... }CSS after that.
就在最后，然后移动你的html { background:... }CSS。
This way you can see if there is a mobile footer div or any other element you created that is getting in the way, blocking the view.
通过这种方式，您可以查看是否有移动页脚 div 或您创建的任何其他元素挡住了视线。
Also I would try applying the background CSS to body rather than HTML. Hope you get closer to the answer.
此外，我会尝试将背景 CSS 应用于正文而不是 HTML。希望你能更接近答案。
回答by Mika Vatanen
Current solution would be to use viewport height (vh) to indicate the desired height. 100% did not work for Mobile Chrome. CSS:
当前的解决方案是使用视口高度 (vh) 来指示所需的高度。100% 不适用于移动 Chrome。CSS：
background-size: cover;
min-height: 100%;
