我的网站在 iphone 6/7/8 上正常，但在其他网站上出现问题，我该如何解决

Question

我已经使用媒体查询使我的网站适合 iphone /6/7/8 但是当我在开发工具中将其更改为 iphone x 时，有一些黑色 space 在右侧和其他设备一样，我如何使我的网站适合所有设备，我使用什么查询以及我做错了什么？

var navLinks = document.getElementById("navLinks");

function showMenu() {
    navLinks.style.right = "0";

}
function hideMenu() {
    navLinks.style.right = "-400px";

}

/* MEDIA CSS */
@media screen and (max -width: 700px) {
  .nav-links ul li {
    display: block;
  }
  .nav-links {
    position: fixed;
    background: #ffd700;
    height: 100vh;
    width: 12.5em;
    top: 0;
    right: -200px;
    text-align: left;
    z-index: 2;
  }
  nav .fas {
    display: block;
    color: black;
    margin: 1.625em;
    font-size: 1.375em;
    cursor: pointer;
    position: relative;
    right: 0.6em;
  }
  .nav-links ul {
    padding: 1em;
  }
  .text-box h1 {
    font-size: 4.3em;
  }
  nav img {
    width: 20em;
    position: relative;
    top: 0.1em;
  }
  .player-info p {
    padding-left: 0;
    font-size: 0.8em;
    padding-top: 0;
  }
}

/* NORMAL CSS */
* {
  margin: 0;
  padding: 0;
  font-family: "Nunito", sans-serif;
}

@font-face {
  font-family: "BatmanForeverOutline";
  font-style: normal;
  font-weight: normal;
  src: local("BatmanForeverOutline"), url("batmfo__.woff") format("woff");
}

@font-face {
  font-family: "BatmanForeverAlternate";
  font-style: normal;
  font-weight: normal;
  src: local("BatmanForeverAlternate"), url("batmfa__.woff") format("woff");
}

body {
  background-color: black;
  width: 100%;
}

em {
  color: #ffd700;
  font-style: normal;
  font-family: "Nunito", sans-serif;
}
.header {
  min-height: 100vh;
  min-width: 200px;
  background-image: linear-gradient(
    rgba(105, 105, 105, 0.7),
    rgba(105, 105, 105, 0.7)
  );
  background-position: center;
  background-size: cover;
  position: relative;
}

.main-texts {
  min-height: 85vh;
  background-image: url(images/background.jpeg);
  background-position: center;
  background-size: cover;
  position: relative;
  border-bottom: 0.1875em solid #ffd700;
}
.menu-header {
  width: 100%;
  background-color: #ffd700;
  min-height: 15vh;
  border-bottom: 0.1875em solid #fff;
}

nav img {
  width: 25em;
}

nav {
  display: flex;
  padding: 2% 1%;
  justify-content: space-between;
  align-items: center;
}

.nav-links {
  flex: 1;
  text-align: center;
  position: relative;
  right: 12.5em;
}

.nav-links ul li {
  list-style: none;
  display: inline-block;
  padding: 0.5em 3.125em;
  position: relative;
}

.nav-links ul li a {
  color: rgb(105, 105, 105);
  text-decoration: none;
  font-size: 1.375em;
  transition: 0.5s;
}

.nav-links ul li::after {
  content: "";
  width: 0%;
  height: 0.1875em;
  background: white;
  display: block;
  margin: auto;
  transition: 0.5s;
  position: relative;
  bottom: 0.1875em;
}

.nav-links ul li:hover::after {
  width: 100%;
}

.nav-links ul li a:hover {
  color: white;
}

.text-box {
  color: #fff;
  width: 90%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.text-box h1 {
  font-size: 5.625em;
  font-family: "Nunito", sans-serif;
}
.text-box p {
  margin: 0.625em 0 2.5em;
  font-size: 1.5625em;
  color: #fff;
}
.player-info {
  margin: 0.625em 0 2.5em;
  font-size: 1.5625em;
  color: #fff;
}
.hero-btn {
  display: inline-block;
  text-decoration: none;
  color: #fff;
  border: 0.0625em solid #fff;
  padding: 0.5em 1.25em;
  font-size: 1.125em;
  background: transparent;
  border-radius: 0.1875em;
  position: relative;
  cursor: pointer;
}

.hero-btn:hover {
  border: 0.0625em solid #fff;
  background: #ffd700;
  transition: 0.5s;
  border-radius: 0.3125em;
}

nav .fas {
  display: none;
}

.meet-me {
  width: 80%;
  text-align: center;
  margin: auto;
  padding-top: 6.25em;
}
.meet-me h1 {
  font-size: 2.25em;
  font-weight: 600;
  color: #fff;
  padding-bottom: 1.875em;
}

.meet-me p {
  text-align: left;
  padding-left: 9.375em;
}

footer {
  width: 100%;
  background-color: black;
  height: 20.625em;
  border-top: 0.3125em solid #fff;
}

.footer-headers {
  text-align: center;
  padding-top: 1.25em;

  padding-bottom: 1.25em;
}

.footer-headers ul li {
  list-style: none;
  display: inline-block;
  padding: 1.25em 5em;
  position: relative;
}

.footer-headers ul li a {
  text-decoration: none;
  color: #ffd700;
  font-size: 1.125em;
  transition: 0.5s;
}

.footer-headers ul li a::after {
  content: "";
  width: 0%;
  height: 0.1875em;
  background: white;
  display: block;
  margin: auto;
  transition: 0.5s;
  position: relative;
  bottom: 0.1875em;
}

.footer-headers ul li a:hover::after {
  width: 100%;
}
.foot-logo img {
  width: 25em;
  padding-top: 0.0625em;
  position: relative;
  right: 1.875em;
}

.foot-logo {
  text-align: center;
}

.copyright h4 {
  color: #ffd700;
  position: relative;
  top: 0.625em;
}
.copyright {
  text-align: center;
  position: relative;
  top: 2.5em;
}

.copyright h4 a {
  text-decoration: none;
  color: #ffd700;
  transition: 0.5s;
}

.copyright h4 a:hover {
  color: red;
}

.socials a i {
  color: #ffd700;
  transition: 0.5s;
}
.socials a i:hover {
  color: red;
}
.socials {
  text-align: center;
  position: relative;
  top: 1.5625em;
}

.socials i {
  padding: 0.3125em 2.5em;
}

<html lang="en">
<head>

    <script>
        ScrollReveal({ reset: true });
    </script>
    <script src="https://unpkg.com/scrollreveal"></script>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Home | LuxxMob</title>
    <link rel="stylesheet" href="style.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
            href="https://fonts.googleapis.com/css2?family=Teko:wght@400;500;700&display=swap"
            rel="stylesheet"
    />
    <script
            src="https://kit.fontawesome.com/360332bae9.js"
            crossorigin="anonymous"
    ></script>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
            href="https://fonts.googleapis.com/css2?family=Nunito:wght@200;400;700&display=swap"
            rel="stylesheet"

    />

</head>
<body>

<section class="header">
    <div class="menu-header">
        <nav>
            <a href="index.html"><img src="images/HD_FILE (2).png" /></a>
            <div class="nav-links" id="navLinks">
                <i class="fas fa-times" onclick="hideMenu()"></i>
                <ul>
                    <li>
                        <a href="index.html">Home</a>
                    </li>
                    <li>
                        <a href="news.html">News</a>
                    </li>
                    <li>
                        <a href="players.html">Players</a>
                    </li>
                    <li>
                        <a href="partners.html">Partners</a>
                    </li>
                    <li>
                        <a href="about-us.html">About Us</a>
                    </li>
                </ul>
            </div>
            <i class="fas fa-bars" onclick="showMenu()"></i>
        </nav>
    </div>

    <div class="main-texts">
        <div class="text-box">
            <h1>Welcome To <em>LuxxMob</em></h1>
            <p>An upcoming eSports team recruiting talented gamers and quality content creators.</p>

            <a href="about-us.html" class="hero-btn">About Us</a>
        </div>
    </div>
</section>

<!--NEXT SECTION MEET THE OWNER-->

<section class="meet-me">
    <h1>Meet The Players</h1>

    <div class="player-info">
        <p>
            Meet the competitive players, content creators and the owner of
            LuxxMob. A rapidly growing team of highly skilled members, providing
            some of the best content and gameplay available on social media
            currently.
        </p>
    </div>
</section>

<!--FOOTER SECTION-->

<footer>
    <div class="footer-headers">
        <ul>
            <li>
                <a href="index.html">Home</a>
            </li>
            <li>
                <a href="news.html">News</a>
            </li>
            <li>
                <a href="players.html">Players</a>
            </li>
            <li>
                <a href="partners.html">Partners</a>
            </li>
            <li>
                <a href="about-us.html">About Us</a>
            </li>
        </ul>
    </div>
    <div class="foot-logo">
        <img src="images/HD_FILE (2).png" />

    </div>
    <div class="socials">

        <a href="https://www.tiktok.com/@luxxmob?lang=en"> <i class="fab fa-tiktok"></i></a>
        <a href="https://twitter.com/LuxxMob"> <i class="fab fa-twitter"></i></a>
        <a href="https://www.instagram.com/TheLuxxMob/"> <i class="fab fa-instagram"></i></a>
    </div>
    <div class="copyright">
        <h4>&copy 2021 LuxxMob</h4>
        <h4>Made with  &#10084 by <a href="https://www.tiktok.com/@truechow?lang=en">@truechow</a></h4>
    </div>
</footer>

Answer 1

CSS overflow : hidden 可能对您有所帮助。

Answer 2

正如我在您的代码中看到的，您只使用了一种媒体查询，因此尝试通过考虑所有尺寸的设备来添加媒体查询。请找到以下媒体查询：

@media screen and (min-width: 320px) and (max-width: 576px) {

}

@media screen and (min-width: 577px) and (max-width: 767px) {

}

@media screen and (min-width: 768px) and (max-width: 991px) {

}

@media screen and (min-width: 992px) and (max-width: 1055px) {

}

@media screen and (min-width: 992px) and (max-width: 1200px) {

}

@media screen and (min-width: 1201px) and (max-width: 1400px) {

}

我的网站在 iphone 6/7/8 上正常，但在其他网站上出现问题，我该如何解决

my website is ok on iphone 6/7/8 but messes up on others, how do i fix

html

javascript

css

media

responsive