【问题标题】:Grey Bar at bottom of Website Only On Mobile View网站底部的灰色条仅在移动视图上
【发布时间】:2017-12-11 06:19:18
【问题描述】:

我在我的网站 (www.brentleas.com) 上设置了背景,它会填满桌面上的屏幕,但在移动设备上却没有。当我在 chrome 上使用开发工具时,它会显示填充屏幕的图像。但是,当我在手机上加载网站时,页面底部有一个灰色条。

图片显示我在说什么:1

这是我的 CSS 代码:

html {

background-image: url("../images/cooper.png");

background-repeat: no-repeat;

background-position: center center;

background-attachment: fixed;

background-size: cover;

background-color: #464646;

color: white; }

任何帮助将不胜感激。提前致谢。

【问题讨论】:

  • 我无法在 Chrome 59 开发工具上复制该问题。
  • 在使用开发者工具时它会填满屏幕吗?我也在使用 chrome 59。
  • Yes
  • 您有可以尝试加载的移动设备吗?在我的 nexus 6p 和 Galaxy s8 上,它显示一个灰色条。
  • 刚刚在我的手机上查看过。它覆盖了整个屏幕。尝试在隐身标签页中打开该页面。

标签: html css image mobile background-image


【解决方案1】:

min-height: 100%; 我猜应该可以解决问题

【讨论】:

  • 我会试试的。感谢您的建议。
  • 是的,我会把 html 和 body 放在 height: 100%;或最小高度:100%;
【解决方案2】:

像这样使用 js 并根据视口大小调整它:

//ON LOAD INITIALLY ASSUME PHONE
var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
doc.getElementsByTagName("body")[0].style.padding = "2px";
var mainItems = doc.getElementsByClassName("main-item");
for (var i = 0; i < mainItems.length; i++) {
    mainItems[i].classList.add("full-width");
}
doc.getElementsByTagName("main")[0].classList.add("column");
// doc.getElementById("title-right").style.display = "none";
if (width >= 840) {
    //IT'S A DESKTOP
    doc.getElementsByTagName("body")[0].style.padding = "24px";
    for (var i = 0; i < mainItems.length; i++) {
        mainItems[i].classList.remove("full-width");
    }
    doc.getElementsByTagName("main")[0].classList.remove("column");
    // doc.getElementById("title").style.display = "none";
    // doc.getElementById("title-right").style.display = "flex";
}
else if (width >= 480) {
    //IT'S A TABLET
    // doc.getElementById("title").style.display = "flex";
    doc.getElementsByTagName("body")[0].style.padding = "24px";
    for (var i = 0; i < mainItems.length; i++) {
        mainItems[i].classList.remove("full-width");
    }
    doc.getElementsByTagName("main")[0].classList.remove("column");
}
//ON RESIZE INITIALLY ASSUME PHONE
window.addEventListener("resize", resizeThrottler, false);
var resizeTimeout;
function actualResizeHandler() {
    // assuming device is a phone
    doc.getElementsByTagName("body")[0].style.padding = "2px";
    for (var i = 0; i < mainItems.length; i++) {
        mainItems[i].classList.add("full-width");
    }
    doc.getElementsByTagName("main")[0].classList.add("column");
    // doc.getElementById("title").style.display = "flex";
    // doc.getElementById("title-right").style.display = "none";
    if (window.innerWidth >= 840) {
        //device is a desktop
        doc.getElementsByTagName("body")[0].style.padding = "24px";
        for (var i = 0; i < mainItems.length; i++) {
            mainItems[i].classList.remove("full-width");
        }
        doc.getElementsByTagName("main")[0].classList.remove("column");
        // doc.getElementById("title").style.display = "none";
        // doc.getElementById("title-right").style.display = "flex";
    }
    else if (window.innerWidth >= 480) {
        //device is a tablet
        doc.getElementByTagName("body")[0].style.padding = "24px";
        for (var i = 0; i < mainItems.length; i++) {
            mainItems[i].classList.remove("full-width");
        }
        doc.getElementsByTagName("main")[0].classList.remove("column");
        // doc.getElementById("title").style.display = "none";
        // doc.getElementById("title-right").style.display = "flex";
    }
}
function resizeThrottler() {
    // ignore resize events as long as an actualResizeHandler execution is in the queue
    if (!resizeTimeout) {
        resizeTimeout = setTimeout(function() {
            resizeTimeout = null;
            actualResizeHandler();
            // The actualResizeHandler will execute at a rate of 15fps
        }, 66);
    }
}

【讨论】:

    【解决方案3】:

    我清除了手机上的缓存。现在灰色条消失了。

    【讨论】:

    • 如果您已经将高度设置为 100%,这实际上是通常的解决方案
    猜你喜欢
    • 2020-11-21
    • 1970-01-01
    • 2015-01-13
    • 2019-02-16
    • 1970-01-01
    • 1970-01-01
    • 2013-08-29
    • 2020-12-27
    • 2018-10-26
    相关资源
    最近更新 更多