android - 我的网站背景无法在移动设备上正确呈现

问题描述

它在桌面和 web 开发模式（ firefox ）上完美显示，但在真实移动设备上，背景图像无法正确显示。

这是我的代码：

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <link rel="stylesheet" type="text/css" href="css/css_index.css">
                <title>This is Shivansh's Blog</title>
            </head>
            <body>
                <div class="parent">
                    <div class="parent_hello_box">
                        <span class="parent_hello_text">Hello !</span>
                    </div>
                    <div class = "footer">
                        <ul class = "nav_menu">
                            <li class = "nav_item">
                                <a href="https://www.google.com">About</a>
                            </li>
                            <li class = "nav_item">
                                <a href="https://www.google.com">Work</a>
                            </li>
                            <li class = "nav_item">
                                <a href="https://www.google.com">Movies</a>
                            </li>
                            <li class = "nav_item">
                                <a href="https://www.google.com">Books</a>
                            </li>
                            <li class = "nav_item">
                                <a href="https://www.google.com">Travels</a>
                            </li>
                            <li class = "nav_item">
                                <a href="https://www.google.com">Photos</a>
                            </li>
                            <li class = "nav_item">
                                <a href="https://www.google.com">Spirit</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </body>
        </html>

这是我的CSS：

/**, html {
    margin:0;
    padding:0;  
}*/

@font-face {
    font-family: rage;
    src: url("../fonts/rage_gtavc.ttf");
}

@font-face {
    font-family: milkshake;
    src: url("../fonts/milkshake/milkshake.ttf");
}


@media only screen and (min-width: 144px) {
    .parent_hello_text {
        font-size: 64px;
    }
}

@media only screen and (min-width: 320px) {
    .parent_hello_text {
        font-size: 96px;
    }
}

@media only screen and (min-width: 480px) {
    .parent_hello_text {
        font-size: 128px;
    }
}

@media only screen and (min-width: 720px) {
    .parent_hello_text {
        font-size: 144px;
    }
}

@media only screen and (min-width: 1024px) {
    .parent_hello_text {
        font-size: 196px;
    }
}


body {
    background-image: url("../bg/196339.jpg");
    /*width: 100%;*/
    height: 100%;
    background-size: cover;
    -webkit-background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center;
}

.parent_hello_box {
    transition: 0.5 all;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    text-align: center;
}

.parent_hello_text {
    color: white;
    text-shadow: 2px 3px #FABF84;
    font-family: milkshake;
}

.footer {
  position: absolute;
  bottom: 1.2vh;
  width: 100%;
  text-align: center;
}


.footer a {
    text-decoration: none;
    font-family: rage;
    font-size: 36px;
    color: #FDFDFD;
    text-shadow: 2px 2px #FC53A7;
    /*text-shadow: 2px 2px #F449B9;*/
}

.footer a:hover {
    text-decoration: underline;
}

.nav_menu {
    z-index: 9;
    display: inline-block;
}

.nav_item {
    margin-left: 20px;
    margin-right: 20px;
    display: inline-block;
    transform: rotate(-8deg);
}

这是我的背景图片：

结果在桌面上>>>

手机上的结果是 >> 可以清楚地看到手机上没有显示图像。我能做些什么来解决这个问题？提前致谢。

标签： androidhtmlcss

android - 我的网站背景无法在移动设备上正确呈现

问题描述

解决方案

推荐阅读