“背景大小：封面”不包括手机屏幕

我在我的网站上使用background-size:cover的背景照片。它在大多数情况下工作，但在人像模式下在我的Galaxy S3上留下了一个奇怪的〜30px空白区域。“背景大小：封面”不包括手机屏幕

我附上了截图。 1px深青线是为了说明整个屏幕。似乎背景在社交媒体ul之后立即停止。

我通过删除ul和背景将其自身附加到标语文本的底部来测试了这一点。

problem screenshot

而且，这里是属于移动波泰特查看我的CSS：

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

过去，这不会发生，但我想我不小心窃听它试图解决的另一个问题。

来源

2012-12-01 Vitaliy G.

HTML，用于背景图片的CSS？ – tobiv

该CSS为'html { \t \t background：url（../ images/bg。JPG）不重复右上方固定; \t \t -webkit-background-size：cover; \t \t -moz-background-size：cover; \t \t -o-background-size：cover; \t \t background-size：cover; \t} ' –

只有几个猜测：你尝试过'HTML {height：100％}'，还是试图将背景附加到'body'而不是'html'？ – tobiv

经过几个小时的尝试不同的事情，在{ background:... }的html的底部添加min-height: 100%;为我工作。

来源

2012-12-01 19:47:15

感谢您的提示，艺术！ –

最后，别人花了几个小时试图解决的问题，我得到了现成的答案，做出了改变！非常感谢，发挥了魅力。 – iforwms

考虑加入'100vh'的高度：http://stackoverflow.com/a/38532368/2418655 – dhaupin

Galaxy S3在纵向或横向视图中的宽度都大于480px，所以我不认为这些CSS规则会适用。你将需要使用720px。

试加：

* { background:transparent }

就在结束&之后将你的html { background:... } CSS。

通过这种方式，您可以查看是否存在移动页脚div或您创建的阻碍视图的任何其他元素。

另外，我会尝试应用背景CSS到身体而不是HTML。希望你接近答案。

来源

2012-12-01 12:12:39

这覆盖了屏幕的一半。上面的用户建议在html元素上使用{height：100％}。这似乎解决了这个问题，但是当设备变成横向时，屏幕只覆盖了一半，其余显示为白色。如果可以，请随时查看现场问题。也许这会更容易。 –

我曾在现场直播过，但我没有Galaxy S3。我的建议没有运气？ –

不幸的是没有。这就是我所看到的（这是来自我的桌面 - 奇怪的是，我所遇到的原始问题无法在桌面上复制，即使相同的宽度/高度被满足）http://i.imgur.com/uZh9q.png –

这适用于Android 4.1.2和iOS 6.1.3（iPhone 4）和桌面切换器。为响应网站撰写。

以防万一，在你的HTML的头，像这样：

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

HTML：

<div class="html-mobile-background"></div>

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

来源

2013-10-06 04:57:40

目前的解决方案是使用视高（vh）来表示所需的高度。 Mobile Chrome无法使用100％的内容。 CSS：

background-size: cover; 
min-height: 100%;

来源

2016-09-05 19:32:44

“背景大小：封面”不包括手机屏幕

回答

相关问题