Question

所以我创建了一个旨在扩展到移动设备的网站

http://follow.sueu.org.au/

它在我的旧手机上运行良好，但不适用于使用谷歌浏览器的更现代的智能手机（包括Iphone和Android）。

问题在于，在主页上，背景图像在移动设备上的屏幕上有一半。

http://s23.postimg.org/4hozcopsb/photo.png

我在CSS上相当业余，我确信有些事情我做错了，但我无法理解。

    <html>
<head>
<title>The Story of Love</title>

<meta name="viewport" content="width=device-width;">

<style>

    #wrap { 
      width: 500px; 
      margin: 0 auto;
     }

    body
    {
    background-image:url('Images/Title_BackgroundImage.jpg');
    background-repeat:no-repeat;
    background-position: top center;
    background-size:500px;
    background-color:#4e4943;
    }

        .introduction {
        position: top center;
        top: 0px;
        left: 0px;
        height: 227px;
        width: 500px;
    }
        .introduction a {
            display: block;
            width: 100%;
            height: 100%;
        }

    .love {
        position: top center;
        top: 227px;
        left: 0px;
        height: 90px;
        width: 500px;
    }
        .love a {
            display: block;
            width: 100%;
            height: 100%;
        }

    .gather {
        position: top center;
        top: 317px;
        left: 0px;
        height: 94px;
        width: 500px;
    }
        .gather a {
            display: block;
            width: 100%;
            height: 100%;
        }

    .relate {
        position: top center;
        top: 411px;
        left: 0px;
        height: 91px;
        width: 500px;
    }
        .relate a {
            display: block;
            width: 100%;
            height: 100%;
        }

    .witness {
        position: top center;
        top: 502px;
        left: 0px;
        height: 79px;
        width: 500px;
    }
        .witness a {
            display: block;
            width: 100%;
            height: 100%;
        }

    .love2 {
        position: top center;
        top: 581px;
        left: 0px;
        height: 125px;
        width: 500px;
    }
        .love2 a {
            display: block;
            width: 100%;
            height: 100%;
        }


@media screen and (max-width: 480px)
    {

    #wrap { 
      width: 320px; 
      margin: 0 auto; 
    }

    body
    {
    background-image:url('Images/Title_BackgroundImage_Mobile.jpg');
    background-repeat:no-repeat;
    background-position: top center;
    background-size:320px;
    }

    .introduction {
        position: top center;
        top: 0px;
        left: 0px;
        height: 145px;
        width: 320px;
    }
        .introduction a {
            display: block;
            width: 100%;
            height: 100%;
        }

    .love {
        position: top center;
        top: 145px;
        left: 0px;
        height: 50px;
        width: 320px;
    }
        .love a {
            display: block;
            width: 100%;
            height: 100%;
        }

    .gather {
        position: top center;
        top: 203px;
        left: 0px;
        height: 60px;
        width: 320px;
    }
        .gather a {
            display: block;
            width: 100%;
            height: 100%;
        }

    .relate {
        position: top center;
        top: 264px;
        left: 0px;
        height: 61px;
        width: 320px;
    }
        .relate a {
            display: block;
            width: 100%;
            height: 100%;
        }

    .witness {
        position: top center;
        top: 323px;
        left: 0px;
        height: 51px;
        width: 320px;
    }
        .witness a {
            display: block;
            width: 100%;
            height: 100%;
        }

    .love2 {
        position: top center;
        top: 372px;
        left: 0px;
        height: 78px;
        width: 320px;
    }
        .love2 a {
            display: block;
            width: 100%;
            height: 100%;
        }
    }
</style>
</head>

<body>
<div id="wrap">

<div class="introduction">
<a href="Introduction/Introduction.html">
</a></div>

<div class="love">
<a href="Chapter1/Chapter1_Title.html">
</a></div>

<div class="gather">
<a href="Chapter2/Chapter2_Title.html">
</a></div>

<div class="relate">
<a href="Chapter3/Chapter3_Title.html">
</a></div>

<div class="witness">
<a href="Chapter4/Chapter4_Title.html">
</a></div>

<div class="love2">
<a href="Chapter5/Chapter5_Title.html">
</a></div>

</div>
</body>
</html>

Answer 1

 #wrap { 
  width: 500px; 
  margin: 0 auto;
 }

例如在iphone上，你会看到它几乎切成两半因为它的宽度为320px。你应该添加类似的东西：

@media screen and (max-width: 320px){
       #wrap { 
        width: 320px!important; 
       }
}

中心背景图像在移动设备上切断

1 个答案: