我已经在互联网上搜索了好几个小时，不明白为什么我的网站在桌面上有响应，但在手机上没有响应(至少在我的iphone X上(。在移动设备上，除了页面顶部的gif外，我的所有元素都向左移动，一半隐藏在浏览器窗口外(没有水平滚动条btw(。我有viewport元标记，这是我能找到的唯一解决方案，但当我添加它后进行检查时，它对我网站的移动视图没有任何影响。还有什么问题吗？我是一个初学者，所以我希望这只是一个愚蠢的小错误。有人请帮忙。我快把头发扯下来了！
你可以访问这里的网站并调整大小，看看它应该是什么样子，这是它目前在移动设备上的样子(不是全景，只是我网站底部的一张照片，因为你可以从那里最清楚地看到问题(：移动屏幕截图
这是我的代码：
<!doctype html>
<!-- This comment line needed for bootstrap to work on mobile devices -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>Jasmine Thorson</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen">
</head>
<body>
<ul id="menu">
<li><a href="#work" class="nav">WORK</a></li>
<li><a href="#about" class="nav">ABOUT</a></li>
<li><a href="#skills" class="nav">SKILLS</a></li>
<li><a href="#contact" class="nav">CONTACT</a></li>
</ul>
<a href="#top" id="logo"></a>
<div id="top"></div>
<div id="box0">
<img src="headergif_vert.gif" alt="myhero" class="hero">
</div>
<div id="work">
<div id="box1">
</div>
<div id="box2">
</div>
<div id="box3">
</div>
<div id="box4">
</div>
<div id="box5">
</div>
<div id="box6">
</div>
<div id="box7">
</div>
<div id="box8">
</div>
<div id="box9">
</div>
<div id="box10">
</div>
</div>
<div id="about"></div>
<img src="ABOUTGIF.gif" class="aboutgif" alt="aboutgif">
<div id="aboutme">
<h1 class="abouthead">I'm a young creative fresh out of college with lots of <mark class="pink">charisma.</mark></h1>
<p class="para">I believe that good design can help people laugh, cry, stay informed, & understand each other better. Design, simply, is visual communication.</p>
<p class="para">As a designer + photographer, it's my goal to capture the essence of my subject & express that essence in the most clear, consistent, & appropriate manner.</p>
</div>
<div id="skills"></div>
<div class="w3-container">
<table class="table1">
<tr>
<td><img src="ICONS_BRANDING.png" alt="branding" class="icon1"></td>
<td><img src="ICONS_INFOGRAPHICS.png" alt="info" class="icon1"></td>
</tr>
<tr>
<td><img src="ICONS_DIGITAL.png" alt="digital" class="icon1"></td>
<td><img src="ICONS_SOCIAL.png" alt="social" class="icon1"></td>
</tr>
</table>
<table class="table2">
<tr>
<td><img src="ICONS_BRANDING.png" alt="branding" class="icon2"></td>
<td><img src="ICONS_INFOGRAPHICS.png" alt="info" class="icon2"></td>
<td><img src="ICONS_DIGITAL.png" alt="digital" class="icon2"></td>
<td><img src="ICONS_SOCIAL.png" alt="social" class="icon2"></td>
</tr>
</table>
</div>
<div id="contact"></div>
<div id="contactbox">
<div class="col1"><h2>JASMINE THORSON</h2></div>
<div class="col5"><h2>INFO</h2></div>
<div class="col1">Graphic Designer + Photographer</div>
<div class="col2">Brooklyn, NY</div>
<div class="col3">605 + 268 + 3245</div>
<div class="col4">jnthorson@gmail.com</div>
<div class="col5">Resume</div>
</div>
<footer>
<a href="https://www.instagram.com/jasmine.thorson/"><img src="insta.png" id="insta" alt="gram" class="social"></a>
<a href="https://www.behance.net/jnthorson"><img src="behance.png" id="behance" alt="be" class="social"></a>
</footer>
</body>
</html>
这是我的CSS：
@charset "UTF-8";
body {
background-color: #DBD9D6;
margin: 0;
padding: 0;
font-family: "Arial Rounded MT Bold";
color: #978B87;
}
p {
font-family: Geneva;
font-size: .75em;
line-height: 1.5em;
}
h1{
line-height: 1.25em;
}
h4{
color: #D41773;
column-span: all;
}
h5{
color: #D41773;
font-size: .65em;
}
#menu {
list-style-type: none;
margin: 20px;
padding: 0px;
width: 80px;
position: fixed;
font-family: "Arial Rounded MT Bold";
font-size: 9px;
line-height: 10px;
right: 0;
text-align: right;
z-index: 4;
}
#menu li, #menu a {
display: block;
color: black;
opacity: .35;
padding: 2px;
text-decoration: none;
}
#menu li, #menu a:hover {
background-color: transparent;
color: #D41773;
opacity: 1;
transition: color 0.3s linear;
}
#menu li, #menu a:active {
background-color: transparent;
color: #D41773;
}
#logo {
position: fixed;
display: inline-block;
margin: 20px;
width: 207px;
height: 53px;
background-image: url("logoheader.png");
z-index: 4;
}
#logo:hover {
background-image: url(logoheader.png);
background-position: 0 -54.5px;
}
img.hero {
display: block;
height: 100vh;
padding: 0px;
margin-left: auto;
margin-right: auto;
}
#box0{
height: 100vh;
width: 100%;
background-color: #DBD9D6;
background-size: cover;
display: table;
background-attachment: fixed;
margin-left: auto;
margin-right: auto;
}
#box1{
height: 60vh;
width: 100%;
background-image: url(box1.jpg);
background-size: cover;
display: table;
background-attachment: fixed;
}
#box2{
height: 60vh;
width: 100%;
background-image: url(box2.jpg);
background-size: cover;
display: table;
background-attachment: fixed;
}
#box3{
height: 60vh;
width: 100%;
background-image: url(box3.jpg);
background-size: cover;
display: table;
background-attachment: fixed;
}
#box4{
height: 60vh;
width: 100%;
background-image: url(box4.jpg);
background-size: cover;
display: table;
background-attachment: fixed;
}
#box5{
height: 60vh;
width: 100%;
background-image: url(box5.jpg);
background-size: cover;
display: table;
background-attachment: fixed;
}
#box6{
height: 60vh;
width: 100%;
background-image: url(box6.jpg);
background-size: cover;
display: table;
background-attachment: fixed;
}
#box7{
height: 60vh;
width: 100%;
background-image: url(box7.jpg);
background-size: cover;
display: table;
background-attachment: fixed;
}
#box8{
height: 60vh;
width: 100%;
background-image: url(box8.jpg);
background-size: cover;
display: table;
background-attachment: fixed;
}
#box9{
height: 60vh;
width: 100%;
background-image: url(box9.jpg);
background-size: cover;
display: table;
background-attachment: fixed;
}
#box10{
height: 60vh;
width: 100%;
background-image: url(box10.jpg);
background-size: cover;
display: table;
background-attachment: fixed;
}
#aboutme {
margin-top: 150px;
margin-bottom: 200px;
margin-left: 25%;
margin-right: 75%;
width: 300px;
}
.abouthead{
font-size: 1.5em;
}
.para{
font-size: .55em;
}
mark.pink{
color: #D41773;
background: none;
}
.aboutgif{
float: right;
width: 200px;
margin-bottom: 50px;
margin-top: 20px;
}
@media screen and (max-width: 480px) {
.aboutgif{
display: none;
}
}
@media screen and (max-width: 768px) {
#aboutme{
width: 200px;
}
}
@media screen and (max-width: 480px) {
#aboutme{
width: 250px;
}
}
@media screen and (min-width: 768px) {
#aboutme{
width: 370px;
}
}
@media screen and (max-width: 768px) {
.abouthead{
font-size: 1.5em;
}
}
@media screen and (min-width: 768px) {
.abouthead{
font-size: 2em;
}
}
@media screen and (max-width: 480px) {
.abouthead{
font-size: 1.5em;
}
}
@media screen and (max-width: 480px) {
.para{
width: 200px;
}
}
@media screen and (max-width: 768px) {
.para{
font-size: .25em;
}
}
.w3-container{
background-color: #C5BBB6;
margin-top: 100px;
padding: 10px;
}
.table1{
width: 350px;
table-layout: fixed;
border-spacing: 0px;
margin: 0 auto;
margin-top: 100px;
margin-bottom: 100px;
text-align: center;
}
@media screen and (min-width: 768px) {
.table1{
display: none;
}
}
.table2{
width: 650px;
table-layout: fixed;
border-spacing: 0px;
margin: 0 auto;
margin-top: 100px;
margin-bottom: 100px;
text-align: center;
}
@media screen and (max-width: 768px) {
.table2{
display: none;
}
}
td{
padding-top: 20px;
vertical-align: top;
border-spacing: 0px;
}
.icon1{
width: 85px;
padding: 5px;
}
.icon2{
width: 110px;
padding: 5px;
}
#contactbox{
float: left;
width: 85%;
margin-left: 10%;
margin-top: 40px;
margin-bottom: 40px;
column-count: 5;
column-rule-width: 0px;
font-size: .5em;
}
#contactheaders{
column-span: all;
display: inline;
}
.col1{
float: left;
width: 100%;
}
.col2{
float: left;
width: 100%;
}
.col3{
float: left;
width: 100%;
}
.col4{
float: left;
width: 100%;
}
.col5{
float: left;
width: 100%;
}
footer{
position: fixed;
display: inline;
padding: 40px;
left: 0;
bottom: 0;
margin-bottom: 0px;
width: 100%;
height: 10px;
background: none;
color: black;
z-index: 5;
}
.photo{
float: left;
margin-right: 10%;
font-size: .6em;
opacity: .25;
color: black;
}
#insta{
width: 25px;
float: right;
margin-right: 65px;
padding-left: 5px;
}
#behance{
width: 25px;
float: right;
margin-left: 10%;
}
#behance.social, #insta.social {
opacity: 0.25;
filter: alpha(opacity=50);
transition: 0.3s linear;
}
#behance.social:hover, #insta.social:hover {
opacity: 1.0;
filter: alpha(opacity=100);
}
正如我之前所说，我是一个初学者。实际上是个初学者。我们在学校里并没有真正学会这些东西，我们被允许使用Muse，我担心编码看起来有多混乱，所以我现在正在学习，如果我的代码太糟糕了，我很抱歉，但我真的需要一些帮助！我通过验证器运行了这两个代码，并得出了最小的错误(我修复了这些错误(。
我认为一个可能的解决方案是将整个页面居中。保持HTML原样，并添加以下CSS:
html,
body {
width: 100%;
margin: 0 auto;
}
这将告诉你的html和正文居中。我希望这能有所帮助。