18

我的网站上有一张照片背景，使用background-size:cover. 它在大多数情况下都有效，但在我的 Galaxy S3 纵向模式下会留下一个奇怪的~30px 空白区域。

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

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

问题截图

另外，这是我的与移动肖像视图相关的 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;
}

这过去不会发生，但我想我在尝试解决另一个问题时不小心弄错了它。

4

4 回答 4

39

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

于 2012-12-01T19:47:15.873 回答
5

这适用于 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-06T04:57:40.387 回答
1

Galaxy S3 在纵向或横向视图中的宽度都大于 480 像素，因此我认为这些 CSS 规则不适用。您将需要使用 720 像素。

尝试添加：

* { background:transparent }

就在最后&html { background:... }之后移动你的CSS。

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

此外，我会尝试将背景 CSS 应用于正文而不是 HTML。希望你离答案越来越近。

于 2012-12-01T12:12:39.990 回答
0

当前的解决方案是使用视口高度 (vh) 来指示所需的高度。100% 不适用于移动 Chrome。CSS：

background-size: cover;
min-height: 100%;
于 2016-09-05T19:32:44.643 回答