为什么我网站上的某个页面有一个扭曲的移动视图导航栏？

Question

对于我的网站上除Mods页面以外的所有页面，在移动设备上查看时整体外观相同。但是，当我转到Mods页面时，导航栏和所有正文文本的大小突然变大了。同样，它在移动设备上看起来很奇怪。我认为这可能与我的媒体查询有关。我该如何解决这个问题？

P.S。对不起草率的代码。

这是一个普通页面：

＆＃13;

＆＃13;

.nav-text {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #59AC3C;
    border-top-style: solid;
    border-left-style: solid;
    border-width: 3px;
}

.option {
    float: left;
}

.option a {
    display: block;
    color: black;
    text-align: center;
    font-weight: lighter;
    font-family: "Georgia";
    font-size: 20px;
    padding: 14px 16px;
    text-decoration: none;
    border-right: 3px solid black;
}

.option a:hover {
    background-color: #469B43;
}

#logo {
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 1500px;
    height: auto;
    max-width: 100%;
    max-height: 100vh;
    margin: auto;
}

.mod-title, #title, #sponsor-title {
    text-align: center;
}

#intro {
    font-size: 20px;
}

#wallpaper {
    height: auto;
    width: 1500px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
    max-width: 100%;
    max-height: 100vh;
    margin: auto;

}

#farmsim {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 700px;
    height: auto;
    max-width: 100%;
    max-height: 100vh;
    margin: auto;
}

#discord {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 700px;
    height: auto;
    max-width: 100%;
    max-height: 100vh;
    margin: auto;
}

#modhub {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 700px;
    height: auto;
    max-width: 100%;
    max-height: 100vh;
    margin: auto;
}

#myInput {
    width: 170px;
}

#myPay {
    width: 280px;
}

.content {
    max-width: 100%;
    max-height: 100vh;
    margin: auto;
}

.button {
    background-color: #4DAED1;
    border: none;
    color: black;
    padding: 10px 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 20px;
    font-weight: bold;
}

.button:hover {
    background-color: #4CAF50; /* Green */
    color: black;
}

.btn-contain {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

#donate {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

#col {
    color: blue;
    font-weight: bold;
}

.download {
    background-color: #4da6ff;
    border: none;
    color: black;
    padding: 4px 7px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14.5px;
    font-weight: bold;
}

.download:hover {
    background-color: #1a8cff;
    color: black;
}

#mod-status {
    font-size: 25px;
    color: blue;
    border-style: dashed;
    border-color: green;
    border-width: 5px;
    padding: 7px 3px;
}

span {
    color: red;
}

#table {
    width: 900px;
    display: table;
    border-style: dashed;
    border-color: green;
    border-width: 4px;
}

.border {
    border-bottom-style: solid;
}

.main {
    font-family: "Helvetica";
    padding-left: 5px;
    padding-right: 5px;
    margin-top: 10px;
    margin-left: 250px;
    margin-right: 250px;
    border-style: solid;
    border-radius: 20px;
}

@media only screen 
   and (max-width : 1447px) and (min-width : 1248px) {
       .main {
            margin-left: 150px;
            margin-right: 150px;
       }
    } 
    
@media only screen 
   and (max-width : 1447px) and (min-width : 1248px) {
       .main {
            margin-left: 150px;
            margin-right: 150px;
       }
    } 
       
@media only screen 
   and (max-width : 1248px) and (min-width : 1126px) {
       .main {
            margin-left: 90px;
            margin-right: 90px;
       }
}

@media only screen 
   and (max-width : 1126px) and (min-width : 940px) {
       .main {
            margin-left: 50px;
            margin-right: 50px;
       }
}

@media only screen 
   and (max-width : 940px) {
       .main {
            margin-left: 7px;
            margin-right: 7px;
       }
} 

@media only screen 
   and (max-width : 1045px) and (min-width: 760px) {
       #table {
            width: 700px;
       }
}

@media only screen 
   and (max-width : 760px) and (min-width : 550px) {
       #table {
            width: 450px;
       }
}

@media only screen 
   and (max-width : 550px) {
       .negate {
            display: none;
       }
       
       #table {
           width: 300px;
       }
}

＆＃13;

<!DOCTYPE html>
<html>
    <head>
        <title>Ommitted</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <a href="index.html"><img id="logo" src="logo.png"></a>
        <div class="nav-bar">
        <ul class="nav-text">
        <li class="option border"><a href="index.html">Home</a></li>
        <li class="option border"><a href="join.html">Join Discord Server</a></li>
        <li class="option border"><a href="rules.html">Server Rules</a></li>
        <li class="option border"><a href="mods.html">Mods</a></li>
        <li class="option border"><a href="admin-gateway.html">Admin Access</a></li>
        <li class="option border"><a href="apply.html">Apply for Admin</a></li>
        <li class="option border"><a href="donate.html">Donate</a></li>
        <li class="option border"><a href="complaint.html">File a Complaint</a></li>
        <li class="option border"><a href="about.html">About</a></li>
        <li class="option border"><a href="contact.html">Contact Us</a></li>
        </ul>
        </div>
        <div class="main">
            <h1 id="title">ommitted</h1>
            <p id="intro">ommitted</p>
            <div class="btn-contain"><a href="join.html"><button class="button">Join Discord Server</button></a></div>
            <br>
            <img id="wallpaper" src="wallpaper.jpg">
            <h2 id="sponsor-title">Click the following for sites we use.</h2>
            
            <br>
            <p>ommitted</p>
        </div>
    </body>
</html>

＆＃13;

＆＃13;

＆＃13;

这是奇怪的页面：

＆＃13;

＆＃13;

.nav-text {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #59AC3C;
    border-top-style: solid;
    border-left-style: solid;
    border-width: 3px;
}

.option {
    float: left;
}

.option a {
    display: block;
    color: black;
    text-align: center;
    font-weight: lighter;
    font-family: "Georgia";
    font-size: 20px;
    padding: 14px 16px;
    text-decoration: none;
    border-right: 3px solid black;
}

.option a:hover {
    background-color: #469B43;
}

#logo {
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 1500px;
    height: auto;
    max-width: 100%;
    max-height: 100vh;
    margin: auto;
}

.mod-title, #title, #sponsor-title {
    text-align: center;
}

#intro {
    font-size: 20px;
}

#wallpaper {
    height: auto;
    width: 1500px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
    max-width: 100%;
    max-height: 100vh;
    margin: auto;

}

#farmsim {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 700px;
    height: auto;
    max-width: 100%;
    max-height: 100vh;
    margin: auto;
}

#discord {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 700px;
    height: auto;
    max-width: 100%;
    max-height: 100vh;
    margin: auto;
}

#modhub {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 700px;
    height: auto;
    max-width: 100%;
    max-height: 100vh;
    margin: auto;
}

#myInput {
    width: 170px;
}

#myPay {
    width: 280px;
}

.content {
    max-width: 100%;
    max-height: 100vh;
    margin: auto;
}

.button {
    background-color: #4DAED1;
    border: none;
    color: black;
    padding: 10px 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 20px;
    font-weight: bold;
}

.button:hover {
    background-color: #4CAF50; /* Green */
    color: black;
}

.btn-contain {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

#donate {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

#col {
    color: blue;
    font-weight: bold;
}

.download {
    background-color: #4da6ff;
    border: none;
    color: black;
    padding: 4px 7px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14.5px;
    font-weight: bold;
}

.download:hover {
    background-color: #1a8cff;
    color: black;
}

#mod-status {
    font-size: 25px;
    color: blue;
    border-style: dashed;
    border-color: green;
    border-width: 5px;
    padding: 7px 3px;
}

span {
    color: red;
}

#table {
    width: 900px;
    display: table;
    border-style: dashed;
    border-color: green;
    border-width: 4px;
}

.border {
    border-bottom-style: solid;
}

.main {
    font-family: "Helvetica";
    padding-left: 5px;
    padding-right: 5px;
    margin-top: 10px;
    margin-left: 250px;
    margin-right: 250px;
    border-style: solid;
    border-radius: 20px;
}

@media only screen 
   and (max-width : 1447px) and (min-width : 1248px) {
       .main {
            margin-left: 150px;
            margin-right: 150px;
       }
    } 
    
@media only screen 
   and (max-width : 1447px) and (min-width : 1248px) {
       .main {
            margin-left: 150px;
            margin-right: 150px;
       }
    } 
       
@media only screen 
   and (max-width : 1248px) and (min-width : 1126px) {
       .main {
            margin-left: 90px;
            margin-right: 90px;
       }
}

@media only screen 
   and (max-width : 1126px) and (min-width : 940px) {
       .main {
            margin-left: 50px;
            margin-right: 50px;
       }
}

@media only screen 
   and (max-width : 940px) {
       .main {
            margin-left: 7px;
            margin-right: 7px;
       }
} 

@media only screen 
   and (max-width : 1045px) and (min-width: 760px) {
       #table {
            width: 700px;
       }
}

@media only screen 
   and (max-width : 760px) and (min-width : 550px) {
       #table {
            width: 450px;
       }
}

@media only screen 
   and (max-width : 550px) {
       .negate {
            display: none;
       }
       
       #table {
           width: 300px;
       }
}

＆＃13;

<!DOCTYPE html>
<html>
    <head>
        <title>Ommitted</title>
        <link rel="stylesheet" type="text/css" href="style.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <a href="index.html"><img id="logo" src="logo.png"></a>
        <div class="nav-bar">
        <ul class="nav-text">
        <li class="option border"><a href="index.html">Home</a></li>
        <li class="option border"><a href="join.html">Join Discord Server</a></li>
        <li class="option border"><a href="rules.html">Server Rules</a></li>
        <li class="option border"><a href="mods.html">Mods</a></li>
        <li class="option border"><a href="admin-gateway.html">Admin Access</a></li>
        <li class="option border"><a href="apply.html">Apply for Admin</a></li>
        <li class="option border"><a href="donate.html">Donate</a></li>
        <li class="option border"><a href="complaint.html">File a Complaint</a></li>
        <li class="option border"><a href="about.html">About</a></li>
        <li class="option border"><a href="contact.html">Contact Us</a></li>
        </ul>
        </div>
        <div class="main">
            <h1 id="title">ommitted</h1>
            <p id="intro">Depending on traffic and member availability, we sometimes run the server with mods. The current mod status can be found below. If the server is running in mod-mode, all mods required to play are listed under the Mod Directory. Instructions on installation can also be found below. </p><br>
            <h1 id="mod-status">Server Mod-Mode Status: <span>ON</span> (some or all mods enabled)</h1><br>
            <h2 class="mod-title">Mod Directory</h2>
            <p id="intro" style="text-align:center">To view the mod's file size or to download the mod, access this site using a computer.</p>
            <div class="dir">
            <table id="table" style="margin-left:auto;margin-right:auto">
                <tr><th valign="top"><img src="/icons/blank.gif" alt="[ICO]"></th><th>Mod Name</th><th>Currently Enabled</th><th class="negate">Download</th><th class="negate">Size</th><th class="negate">Description</th></tr>
                <tr><th colspan="9"><hr></th></tr>
            <!-- Mod entry start -->
            
                <tr><td valign="top"><img src="/icons/layout.gif" alt="[TXT]"></td><td style="color:blue">Bale Storage</td><td align="center">Yes</td><td align="center" class="negate"><a href="mods/FS17_BaleStorage_placeable.zip"><button class="download">Download</button></a></td><td align="right" class="negate">8.72 MB</td><td align="center" class="negate">-</td></tr>
                
                <tr><td valign="top"><img src="/icons/layout.gif" alt="[TXT]"></td><td style="color:blue">Follow Me</td><td align="center">No</td><td align="center" class="negate"><a href="mods/FS17_DCK_FollowMe.zip" download><button class="download ">Download</button></a></td><td align="right" class="negate">48 KB</td><td align="center" class="negate">-</td></tr>
                
                <tr><td valign="top"><img src="/icons/layout.gif" alt="[TXT]"></td><td style="color:blue">Pleasant Valley 17</td><td align="center">No</td><td align="center"><a href="http://www.mediafire.com/file/4sppp6sex8rpfzw/PV17_V3.zip" download><button class="download negate">Download</button></a></td><td align="right" class="negate">1.5 GB</td><td align="center" class="negate">-</td></tr>
                
                <tr><td valign="top"><img src="/icons/layout.gif" alt="[TXT]"></td><td style="color:blue">Seasons</td><td align="center">No</td><td align="center" class="negate"><a href="http://download940.mediafire.com/4ufibwb79iug/7b7fhdd77x2vmmo/FS17_RM_Seasons.zip" download><button class="download">Download</button></a></td><td align="right" class="negate">16.55 MB</td><td align="center" class="negate">-</td></tr>
                
                <tr><td valign="top"><img src="/icons/layout.gif" alt="[TXT]"></td><td style="color:blue">Stappenbach 17</td><td align="center">No</td><td align="center" class="negate"><a href="http://download1080.mediafire.com/qdfw3ozosgeg/v515ttpa4tbsjp7/FS17_Stappenbach17.zip" download><button class="download">Download</button></a></td><td align="right" class="negate">736.12 MB</td><td align="center" class="negate">-</td></tr>
                
                <tr><td valign="top"><img src="/icons/layout.gif" alt="[TXT]"></td><td style="color:blue">VehicleWaterBreak</td><td align="center">No</td><td align="center" class="negate"><a href="mods/FS17_VehicleWaterBreak.zip" download><button class="download">Download</button></a></td><td align="right" class="negate">14 KB</td><td align="center" class="negate">-</td></tr>
                
            <!-- Mod entry end -->
                <tr><th colspan="9"><hr></th></tr>
            </table></div><br>
            <h2>Windows Installation Instructions</h2>
            <ol>
                <li>ommitted</li>
            <ol>
                <li>ommitted</li>
            </ol><br>
            
            <br>
            <p>ommitted</p>
        </div>
    </body>
</html>

＆＃13;

＆＃13;

＆＃13;

Answer 1

这是＆＃34; mods的<head>＆＃34;但没有任何其他页面。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

您应该在每个页面上都包含此内容，以便更快/流畅的移动开发。

在这里阅读 https://www.w3schools.com/css/css_rwd_viewport.asp