Question

我在我的网站（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; }

非常感谢任何帮助。提前谢谢。

Answer 1

min-height: 100%;应该做我猜的伎俩

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

Answer 3

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

网站底部的灰色栏仅在移动视图上

3 个答案: