在台式机上响应但在移动设备上不响应

时间：2018-07-20 19:14:17

标签： html css mobile responsive viewport

我已经在互联网上搜索了好几个小时，无法弄清楚为什么我的网站在台式机上而不是在手机上（至少在我的iPhone X上）不能响应。在移动设备上，除页面顶部的gif之外，我所有的其他元素都位于左侧，一半隐藏在浏览器窗口的外部（没有水平滚动条）。我在其中有viewport meta标签，这是我能找到的唯一解决方案，但是当我在添加后对其进行检查时，它对网站的移动视图没有任何作用。还有什么问题？我非常初学者，所以我希望这只是一个愚蠢的小错误。有人请帮忙。我要在这里扯头发！

您可以在此处访问该网站并调整大小以查看其外观，这是当前在移动设备上的外观（顺便说一句，不是完整视图，这只是我网站底部的快照，因为您可以最多看到该问题）清楚地从那里开始）： Mobile Screenshot

这是我的代码：

       <!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，并且我担心编码看起来会令人困惑，所以我现在正在学习，很抱歉，如果我的代码令人厌恶，但我真的可以使用一些帮助！我通过验证程序运行了这两个代码，并发现了最小的错误（已修复）。

1 个答案:

答案 0 :(得分：0)

我认为一种可能的解决方案是将整个页面居中。保持HTML不变，并添加以下CSS：

html,
body {
   width: 100%;
   margin: 0 auto;
}

这将告诉您html和body居中。 我希望这会有所帮助。

相关问题
最新问题