所以我创建了一个旨在扩展到移动设备的网站
它在我的旧 Android 手机上运行良好,但在使用 Google Chrome 的更现代的智能手机(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>