我将我的网站放到网上，但如果我通过智能手机或小型设备观看它，每个元素都无法以响应方式查看!这个事实从未发生在我身上。为什么？ 在暂存模式下，我无法以响应模式查看该网站，我想这不是 js 问题而是 css 错误
body {
width: 100%;
margin: 0;
background: #fff;
}
a {
color: blue;
text-decoration: line-through;
}
p {
color: blue;
font-size: 14px;
font-family: 'Montserrat', sans-serif;
}
.white-contact {
background-color: #fff;
padding: 20px;
margin-top: 30px;
}
a:hover {
color: black;
text-decoration: underline;
}
h1 {
position: absolute;
z-index: 998 !important;
/* margin: 0 auto; */
width: 100%;
text-align: center;
height: 100vh;
line-height: 75vh;
font-size: 13em;
color: #fff;
font-family: 'Condiment', cursive;
}
h2 {
font-family: 'Montserrat', sans-serif;
font-size: 20px;
letter-spacing: 2px;
color: blue;
text-transform: uppercase;
text-decoration: line-through;
}
h2.last {
color: blue !important;
}
li {
list-style: none;
color: blue;
font-family: 'Montserrat', sans-serif;
margin-bottom: 2px;
}
ul.do {
padding-left: 0px;
}
h3 {
font-family: 'Montserrat', sans-serif;
font-size: 15px;
letter-spacing: 2px;
color: blue;
}
h3.top-left {
position: fixed;
left: 0px;
padding-left: 30px;
width: 49%;
z-index: 999;
}
h3.top-right {
position: fixed;
right: 0px;
padding-left: 30px;
width: 49%;
z-index: 999;
text-align: right;
padding-right: 30px;
}
h3.bottom-left {
position: fixed;
z-index: 999;
padding-left: 30px;
bottom: 0px;
}
h3.bottom-right {
bottom: 0px;
position: fixed;
text-align: right;
padding-right: 30px;
z-index: 999;
width: 49%;
right: 0px;
}
.top {
}
.bottom {
}
a.social {
text-decoration: line-through;
}
a.social:hover {
text-decoration: underline;
color: yellow;
}
canvas#canv {
z-index: 1;
position: absolute;
}
.mekis-img {
width: 100%;
position: absolute;
z-index: 1;
text-align: center;
height: 100vh;
margin-top: 10%;
}
section{
margin-top: 50px;
}
section.top {
height: 100vh;
margin-top: 0px;
border-bottom: 1px solid blue;
}
section.second {
height: 100vh;
/* background-image: url('http://i.giphy.com/3oEdvcNIvJXteYUEXm.gif');*/
background-position: center;
background-repeat: no-repeat;
background-size: 50%;
}
section.third {
height: 100vh;
background-image: url('http://i.giphy.com/Dc5JEeUuPosN2.gif');
background-position: center;
background-repeat: no-repeat;
background-size: 100%;
}
section.last {
height: 100vh;
background-image: url('http://static2.blog.corriereobjects.it/seigradi/wp-content/blogs.dir/70/files/2013/02/div1.gif');
background-position: center;
background-repeat: no-repeat;
background-size: 100%;
}
.twitter {
text-align: center;
height: 100vh;
/* line-height: 50vh; */
font-size: 1em;
text-transform: uppercase;
font-weight: 900;
padding-top: 10%;
}
}
img.gif-second {
position: absolute;
right: 60px;
opacity: 0.8;
margin-top: -40%;
z-index: -1;
}
.container {
width: 90%;
margin:0 auto;
padding-left: 20px;
padding-right: 20px;
padding-top: 50px;
}<!doctype html>
<!-- CSS -->
<title>Mekis | Official Website</title>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="Mekis Official Website | Producer , Dj Brescia, Italy | Electro, Reggae, Dub, Drum and Bass, Big Beat | Electro vs Rock with Joao at Lio Bar, Road to Zion Electro Dub, Jungle Massive," />
<meta name="keywords" content="brescia dj, mekisdj, mekis, unnu can wid mi, drop 39, djset, electro, rock, dub, reggae, alternative, producer, electro vs rock, road to zion, sound design" />
<!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
<link rel='stylesheet' id='default-style-css' href='style.css' type='text/css' media='all' />
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js'></script>
<script type='text/javascript' src='viewport.js'></script>
<!-- FONTS -->
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Condiment' rel='stylesheet' type='text/css'>
<!-- FONTS -->
</head>
<body>
<section class="top">
<canvas id='canv'>
</canvas>
<div class="top">
<h3 class="top-left">Mekis / msdvc</h3>
<h3 class="top-right">Official Web</h3>
</div>
<audio loop autoplay>
<source src="http://static1.grsites.com/archive/sounds/vehicle/vehicle005.mp3" type="audio/mpeg">
</audio>
<div class="mekis-img">
<img src="img/mekis.png" alt="mekis">
</div>
<div="bottom">
<h3 class="bottom-left"><a class="social" href="https://www.facebook.com/mekisdj/" target="blank">Facebook</a></h3>
<h3 class="bottom-right"><a class="social" href="https://instagram.com/mekisdj/" target="blank">Instagram</a></h3>
</div>
</section>
<section class="second">
<div class="container">
<h2>Ciao! My name is Mekis.<br/>Everyday i do some works</h2>
<h3>What i do?</h3>
<ul class="do">
<li>President at <a href="http://www.cockroachintproduction.com" target="blank">Cockroach Int. Production</a></li>
<li>Music Production</li>
<li>Dj and Producer</li>
<li>Sound Designer</li>
<li>Professor for <a href="http://www.laba.edu/home/index.asp" target="blank">Laba</a> for Sound Design and Computer Graphic</li>
<li>Web at <a href="http://www.adoratorio.com" target="blank">Adoratorio Creative Collective</a></li>
</ul>
<p>-</p>
<h3>What i love</h3>
<ul class="do">
<li>Music and Sound FX</li>
<li>Reggae</li>
<li>Pizza with Salami</li>
<li>Friday Night</li>
</ul>
<p>-</p>
<h3>What i hate</h3>
<ul class="do">
<li>Conventional Design and Music Production</li>
<li>Mostarda</li>
</ul>
<!-- <img class="gif-second" src="img/mekis.png"> -->
</div>
</section>
<section class="third">
<!-- <div class="container">
<h2>I love Twitter</h2>
<div class="twitter">
<p class="twitter">tweet with me. hashtag <a href="https://twitter.com/search?q=%23msdvc&src=typd" target="blank">#mekisdj</a> (for music) or <a href="https://twitter.com/search?q=%23mekisdj&src=typd" target="blank">#msdvc</a> (for web)</p>
</div>
</div> -->
</section>
<section class="last">
<div class="container">
<h2 class="last">Ok. Say hello!</h2>
<div class="white-contact">
<h3>Send me email for booking</h3>
<p>Yes. I love Gmail<br/>
massimo.devicienti[at]gmail.com<p>
</div>
<div class="white-contact">
<h3>Press Kit</h3>
<p>Do you want more info about my projects?<br/>
click and download my press kit<p><br/>
<small>in coming</small>
</div>
</div>
</section>
<!--
Variation of Screwed:
http://codepen.io/tmrDevelops/pen/xwBYvN
!-->
</body>
<script type='text/javascript' src='script.js'></script>
<!--<script type='text/javascript' src='preloader.js'></script>-->
</html>最佳答案
你忘记了响应式 View
<meta name="viewport" content="width=device-width, initial-scale=1">
关于css - HTML5 无响应，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33997970/