iOS 设备上不显示背景图像答案

【问题标题】：Background image not showing up on iOS devicesiOS 设备上不显示背景图像
【发布时间】：2021-01-12 08:37:40
【问题描述】：

我已经在 SO 上检查了以前的答案，但我仍然没有有效的解决方案。我有一个 gatsby 静态站点，在桌面上我实现了无限滚动背景，在移动设备上它假设只是相同背景的静止图像。奇怪的是我只在登录页面上遇到问题，我在其他每个页面上都实现了同样的事情。此外，此问题仅在部署后出现。一切看起来都很好，因为我正在使用 safari 进行构建。我的造型看起来像一盘意大利面，因为我刚刚不知所措，所以我一直在尝试我能想到的任何东西......

我的代码：


import React from "react";
import './index.scss';
import Navbar from '../components/camconavbar.js';
import BackgroundImage from '../../static/Untitled-1.jpg';
import Particles from '../components/particles.js';
import ParticleCamCo from '../../static/CamCo(solid).svg';
import { motion, AnimatePresence } from 'framer-motion';
import { Link } from 'gatsby';

const Home = ({ isVisible }) => {
  return (

    <div className="container">

    <motion.div className="intro-nav" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 5, delay: 17}}>
        <Navbar className="intro-nav" />
    </motion.div>
        <Particles />
        <motion.div className="logo-container" initial={{opacity: 1}} animate={{opacity: 0}} transition={{duration: 1, delay: 5}}>
          <motion.h1 className="cclogo" initial={{opacity: 0, y:100}} animate={{opacity: 1, y:0}} transition={{damping: 2, duration: 0.5}}>C</motion.h1>
          <motion.h1 className="cclogo" initial={{opacity: 0, y:100}} animate={{opacity: 1, y:0}} transition={{damping: 2, duration: 1}}>a</motion.h1>
          <motion.h1 className="cclogo" initial={{opacity: 0, y:100}} animate={{opacity: 1, y:0}} transition={{damping: 2, duration: 1.5}}>m</motion.h1>
          <motion.h1 className="cclogo" initial={{opacity: 0, y:100}} animate={{opacity: 1, y:0}} transition={{damping: 2, duration: 2}}>C</motion.h1>
          <motion.h1 className="cclogo" initial={{opacity: 0, y:100}} animate={{opacity: 1, y:0}} transition={{damping: 2, duration: 2.5}}>o</motion.h1>
        </motion.div>
        <motion.div initial={{opacity: 1}} animate={{opacity: 0}} transition={{duration: 1, delay: 15}}>
          <motion.div initial={{y: 0}} animate={{y: -310}} transition={{duration: 2, delay: 5}}>
            <motion.div className="tagline-container" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 2, delay: 2}}>
              <motion.h1 className="tagline" initial={{opacity: 0}} animate={{opacity: [0, 0.33, 0, 0.66, 1]}} transition={{duration: 0.3, times: [0, 0.1, 0.12, 0.2], delay: 2}}>We</motion.h1>
              <motion.h1 className="tagline" initial={{opacity: 0}} animate={{opacity: [0, 0.33, 0, 0.66, 1]}} transition={{duration: 0.6, times: [0, 0.1, 0.12, 0.2], delay: 2}}> are</motion.h1>
              <motion.h1 className="tagline" initial={{opacity: 0}} animate={{opacity: [0, 0.33, 0, 0.66, 1]}} transition={{duration: 0.9, times: [0, 0.1, 0.12, 0.2], delay: 2}}>the</motion.h1>
              <motion.h1 className="tagline" initial={{opacity: 0}} animate={{opacity: [0, 0.33, 0, 0.66, 1]}} transition={{duration: 1.2, times: [0, 0.1, 0.12, 0.2], delay: 2}}>future</motion.h1>
              <motion.h1 className="tagline" initial={{opacity: 0}} animate={{opacity: [0, 0.33, 0, 0.66, 1]}} transition={{duration: 1.5, times: [0, 0.1, 0.12, 0.2], delay: 2}}>of</motion.h1>
              <motion.h1 className="tagline" initial={{opacity: 0}} animate={{opacity: [0, 0.33, 0, 0.66, 1]}} transition={{duration: 1.8, times: [0, 0.1, 0.12, 0.2], delay: 2}}>entrepreneurship</motion.h1>
            </motion.div>
            <motion.div className="tagline-container" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 2}}>
              <motion.h1 className="tagline" initial={{opacity: 0}} animate={{opacity: [0, 0.33, 0, 0.66, 1]}} transition={{duration: 2.1, times: [0, 0.1, 0.12, 0.2], delay: 2}}>and</motion.h1>
              <motion.h1 className="tagline" initial={{opacity: 0}} animate={{opacity: [0, 0.33, 0, 0.66, 1]}} transition={{duration: 2.4, times: [0, 0.1, 0.12, 0.2], delay: 2}}>business</motion.h1>
              <motion.h1 className="tagline" initial={{opacity: 0}} animate={{opacity: [0, 0.33, 0, 0.66, 1]}} transition={{duration: 2.7, times: [0, 0.1, 0.12, 0.2], delay: 2}}>development.</motion.h1>
            </motion.div>
          </motion.div>
          <motion.div initial={{opacity: 0, y: 100}} animate={{opacity: 1, y: -295}} transition={{duration: 2, delay: 5}}>
            <motion.div className="cta-section" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 1}}>
              <motion.h3 className="cta"  initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 0.2, delay: 6.5}}>The</motion.h3>
              <motion.h3 className="cta"  initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 0.4, delay: 6.5}}>vision</motion.h3>
              <motion.h3 className="cta"  initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 0.6, delay: 6.5}}>and</motion.h3>
              <motion.h3 className="cta"  initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 0.8, delay: 6.5}}>mission</motion.h3>
              <motion.h3 className="cta"  initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 1, delay: 6.5}}>for</motion.h3>
              <motion.h3 className="cta"  initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 1.2, delay: 6.5}}>CamCo</motion.h3>
              <motion.h3 className="cta"  initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 1.4, delay: 6.5}}>Commercial</motion.h3>
              <motion.h3 className="cta"  initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 1.6, delay: 6.5}}>Inc</motion.h3>
              <motion.h3 className="cta"  initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 1.8, delay: 6.5}}>is</motion.h3>
              <motion.h3 className="cta"  initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 2, delay: 6.5}}>to</motion.h3>
              <motion.h3 className="cta"  initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 2.2, delay: 6.5}}>create</motion.h3>
              <motion.h3 className="cta"  initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 2.4, delay: 6.5}}>a</motion.h3>
              <motion.h3 className="cta"  initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 2.6, delay: 6.5}}>platform</motion.h3>
              <motion.h3 className="cta"  initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 2.8, delay: 6.5}}>to</motion.h3>
              <motion.h3 className="cta"  initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 3, delay: 6.5}}>empower</motion.h3>
              </motion.div>

              <motion.div className="cta-section" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 1}}>
              <motion.h3 className="cta"  initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 3.2, delay: 6.5}}>the</motion.h3>
              <motion.h3 className="cta"  initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 3.4, delay: 6.5}}>future</motion.h3>
              <motion.h3 className="cta"  initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 3.6, delay: 6.5}}>leaders</motion.h3>
              <motion.h3 className="cta"  initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 3.8, delay: 6.5}}>of</motion.h3>
              <motion.h3 className="cta"  initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 4, delay: 6.5}}>our</motion.h3>
              <motion.h3 className="cta"  initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 4.2, delay: 6.5}}>world</motion.h3>
              <motion.h3 className="cta"  initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 4.4, delay: 6.5}}>by</motion.h3>
              <motion.h3 className="cta"  initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 4.6, delay: 6.5}}>creating</motion.h3>
              <motion.h3 className="cta"  initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 4.8, delay: 6.5}}>a</motion.h3>
              <motion.h3 className="cta"  initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 5, delay: 6.5}}>network</motion.h3>
              <motion.h3 className="cta"  initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 5.2, delay: 6.5}}>of</motion.h3>
              <motion.h3 className="cta"  initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 5.4, delay: 6.5}}>businesses</motion.h3>
              <motion.h3 className="cta"  initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 5.6, delay: 6.5}}>and</motion.h3>
              <motion.h3 className="cta"  initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 5.8, delay: 6.5}}>business</motion.h3>
              <motion.h3 className="cta"  initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 6, delay: 6.5}}>opportunities</motion.h3>
            </motion.div>

            <motion.div className="cta-section" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 1}}>
              <motion.h3 className="cta"  initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 6.2, delay: 6.5}}>that</motion.h3>
              <motion.h3 className="cta"  initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 6.4, delay: 6.5}}>will</motion.h3>
              <motion.h3 className="cta"  initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 6.6, delay: 6.5}}>provide</motion.h3>
              <motion.h3 className="cta"  initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 6.8, delay: 6.5}}>employment</motion.h3>
              <motion.h3 className="cta"  initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 7, delay: 6.5}}>for</motion.h3>
              <motion.h3 className="cta"  initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 7.2, delay: 6.5}}>thousands</motion.h3>
              <motion.h3 className="cta"  initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 7.4, delay: 6.5}}>of</motion.h3>
              <motion.h3 className="cta"  initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 7.6, delay: 6.5}}>people</motion.h3>
              <motion.h3 className="cta"  initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 7.8, delay: 6.5}}>around</motion.h3>
              <motion.h3 className="cta"  initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 8, delay: 6.5}}>the</motion.h3>
              <motion.h3 className="cta"  initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 8.2, delay: 6.5}}>world.</motion.h3>
            </motion.div>
          </motion.div>
        </motion.div>

        <motion.div className="logo-container" initial={{opacity: 0, y:-780}} animate={{opacity: 1, y:-780}} transition={{duration: 2, delay: 16}}>
          <motion.h1 className="cclogo" initial={{opacity: 0, y:100}} animate={{opacity: 1, y:0}} transition={{damping: 2, duration: 0.5}}>C</motion.h1>
          <motion.h1 className="cclogo" initial={{opacity: 0, y:100}} animate={{opacity: 1, y:0}} transition={{damping: 2, duration: 1}}>a</motion.h1>
          <motion.h1 className="cclogo" initial={{opacity: 0, y:100}} animate={{opacity: 1, y:0}} transition={{damping: 2, duration: 1.5}}>m</motion.h1>
          <motion.h1 className="cclogo" initial={{opacity: 0, y:100}} animate={{opacity: 1, y:0}} transition={{damping: 2, duration: 2}}>C</motion.h1>
          <motion.h1 className="cclogo" initial={{opacity: 0, y:100}} animate={{opacity: 1, y:0}} transition={{damping: 2, duration: 2.5}}>o</motion.h1>
        </motion.div>

        <motion.div className="mobile-landing-nav">
          <motion.div initial={{ opacity: 0 }} animate={{opacity: 1}} transition={{duration: 1}}>
            <motion.div>
              <Link className="hamburger" to="/mobile/"><motion.h1 className="cclogo-mobile" initial={{opacity: 0}} animate={{opacity: 1}} transition={{ duration: 2.5}}>CamCo</motion.h1></Link>
            </motion.div>
          </motion.div>

          <motion.div initial={{ opacity: 0 }} animate={{opacity: 1}} transition={{duration: 2}}>
            <motion.div className="mobile-nav-spacing">
              <Link className="mobile-nav-item" to="/about/">ABOUT</Link>
            </motion.div>
          </motion.div>

          <motion.div initial={{ opacity: 0 }} animate={{opacity: 1}} transition={{duration: 3}}>
            <motion.div className="mobile-nav-spacing">
              <Link className="mobile-nav-item" to="/companies/">COMPANIES</Link>
            </motion.div>
          </motion.div>

          <motion.div initial={{ opacity: 0 }} animate={{opacity: 1}} transition={{duration: 4}}>
            <motion.div className="mobile-nav-spacing">
              <Link className="mobile-nav-item" to="/philanthropy/">PHILANTHROPY</Link>
            </motion.div>
          </motion.div>

          <motion.div initial={{ opacity: 0 }} animate={{opacity: 1}} transition={{duration: 5}}>
            <motion.div className="mobile-nav-spacing">
              <Link className="mobile-nav-item" to="/riseabove/">RISE ABOVE</Link>
            </motion.div>
          </motion.div>

          <motion.div initial={{ opacity: 0 }} animate={{opacity: 1}} transition={{duration: 6}}>
            <motion.div className="mobile-nav-spacing">
              <Link className="mobile-nav-item" to="/team/">OUR TEAM</Link>
            </motion.div>
          </motion.div>

          <motion.div initial={{ opacity: 0 }} animate={{opacity: 1}} transition={{duration: 6}}>
            <motion.div className="mobile-nav-spacing">
              <Link className="mobile-nav-item" to="/press/">PRESS</Link>
            </motion.div>
          </motion.div>

          <motion.div initial={{ opacity: 0 }} animate={{opacity: 1}} transition={{duration: 7}}>
            <motion.div className="mobile-nav-spacing">
              <Link className="mobile-nav-item" to="/contact/">CONTACT</Link>
            </motion.div>
          </motion.div>
        </motion.div>
        <motion.div className="background-container">
          <motion.div className="background-image-x" initial={{ opacity: 0}} animate={{opacity: 1}} transition={{ duration: 1 }}></motion.div>
          <motion.img className="landing-background-image-x" key={BackgroundImage} src={BackgroundImage} initial={{ opacity: 0}} animate={{opacity: 1}} transition={{ duration: 0.75 }}/>
        </motion.div>
    </div>

  )
}

export default Home

我的 scss 文件：


html body {
  margin: 0;
  padding: 0;
}

@media only screen and (max-width: 800px) {
  .nav-item {
    display: none;
  }
}

@media only screen and (min-width: 800px) {
  .hamburger {
    display: none;
  }
}

.hamburger:hover {
  text-decoration: none;
}

@media only screen and (max-width: 768px) {
  .mobile-landing-nav {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
  }
}

@media only screen and (min-width: 768px) {
  .mobile-landing-nav {
    display: none;
  }
}

.mobile-container {
  display: flex;
  flex-direction: column;
  align-content: space-between;
  margin-top: 1px;
  margin-left: 30px;
}

.mobile-nav-spacing {
  margin-left: 18px;
  margin-top: 8px;
  margin-bottom: 8px;
  align-content: space-around;
}

.mobile-nav-item {
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 20px;
  padding-left: 4px;
  text-decoration: none;
  letter-spacing: 5px;
  font-weight: 300;
  font-size: 12px;
  color: white;
  border-bottom-color: white;
  border-bottom-width: thick;
}

.nav-item {
  display: fixed;
  margin-left: 20px;
  margin-right: 20px;
  padding-left: 4px;
  text-decoration: none;
  letter-spacing: 5px;
  font-weight: 300;
  font-size: 12px;
  color: white;
  border-bottom-color: white;
  border-bottom-width: thick;
}

.nav-item:hover {
  text-decoration: none;
  color: white;
}

.mobile-nav-item:hover {
  text-decoration: none;
  color: white;
}

.carousel-item {
  background-color: blue;
  width: 400px;
  height: 400px;
}

button.navbar-toggler {
  justify-content: center;
}

@media only screen and (max-width: 768px) {
  // .mobile-landing-background-x {
  //   background: url("../../static/Untitled-1.jpg");
  //   object-fit: cover;
  //   min-width: 100%;
  //   min-height: 130%;
  //   height: 110%;
  //   position: fixed;
  //   bottom: -10%;
  //   right: 0;
  //   z-index: -4;
  // }

  .landing-background-image-x {
    background: url("../../static/Untitled-1.jpg");

    object-fit: cover;
    min-width: 100%;
    min-height: 100%;
    height: 110%;
    position: fixed;
    bottom: -10%;
    right: 0;
    z-index: -2;
  }

  .nav-background-image-x {
    background: url("../../static/Untitled-1.jpg") 0 0 ;
    // height: 900px;
    // width: 4320px;
    // animation: slide 90s linear infinite;

    background-size: cover;
    min-width: 100%;
    min-height: 100%;
    height: 110%;
    position: fixed;
    bottom: -10%;
    right: 0;
    z-index: -4;
  }

  .background-container div {
    display: none;
  }

  .background-image-x {
    background: url("../../static/Untitled-1.jpg");
    // height: 100%;
    // width: 300%;
    // animation: slide 120s linear infinite;
    object-fit: cover;
    min-width: 100%;
    min-height: 100%;
    height: 110%;
    position: fixed;
    bottom: -10%;
    right: 0;
    z-index: -3;
  }
}

@media only screen and (min-width: 768px) {
  .mobilel-landing-background-x {
    display: none;
  }

  .nav-background-image-x {
    // background: url("../../static/Untitled-1.jpg") repeat-x;
    // height: 900px;
    // width: 4320px;
    // animation: slide 90s linear infinite;

    object-fit: cover;
    min-width: 100%;
    min-height: 100%;
    height: 110%;
    position: fixed;
    bottom: -10%;
    right: 0;
    z-index: -4;
  }

  .background-image-x {
    background: url("../../static/Untitled-1.jpg") repeat-x;
    height: 900px;
    width: 4320px;
    animation: slide 90s linear infinite;

    // object-fit: cover;
    // min-width: 100%;
    // min-height: 100%;
    // height: 110%;
    // position: fixed;
    // bottom: -10%;
    // right: 0;
    z-index: -3;
  }
}
@keyframes slide{
  0%{
    transform: translate3d(0, 0, 0);
  }
  100%{
    transform: translate3d(1440px, 0, 0);
  }
}

.background-container {
  overflow: hidden;
  z-index: -6;
}

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

  .mobile-background-image {
    object-fit: cover;
    min-width: 100%;
    min-height: 100%;
    position: fixed;
    top: 13%;
    bottom: -10%;
    right: 0;
    z-index: -2;
  }

  .background-container div {
    display: none;
  }

  .background-image {
    object-fit: cover;
    min-width: 100%;
    min-height: 100%;
    position: fixed;
    top: 13%;
    bottom: -10%;
    right: 0;
    z-index: -2;
  }
}
@media only screen and (min-width: 768px) {
  .background-container img {
    display: none;
  }

  .mobile-background-image {
    display: none;
  }

  .background-image {
    background: url("../../static/Untitled-2.jpg") repeat-x;
    height: 900px;
    width: 4320px;
    animation: slide 120s linear infinite;
    position: fixed;
    top: 6%;
    bottom: -10%;
    right: 0;
    z-index: 1;
    pointer-events: none;
  }
  .alt-background-image {
    background: url("../../static/Untitled-2.jpg") repeat-x;
    height: 120%;
    width: 120%;
    animation: slide 90s linear infinite;
    position: fixed;
    top: 6%;
    bottom: -10%;
    right: 0;
    z-index: -4;
    pointer-events: none;
  }
}
.intro-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media only screen and (max-width: 768px) {
  .container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

@media only screen and (min-width: 768px) {
  .container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

.logo-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-left: 2.5%;
}
.cclogo {
  color: white;
  font-family: "georgia";
  font-size: 300px;
  font-weight: 800;
  text-shadow: 10px 10px 10px rgba(0,15,44,0.6);
}
.cclogo-mobile {
  margin-top: 5px;
  margin-left: 35px;
  color: white;
  font-family: "georgia";
  font-size: 40px;
  font-weight: 800;
  text-shadow: 10px 10px 10px rgba(0,15,44,0.6);
  text-decoration: none;

}
.cclogo-mobile:hover {
  text-decoration: none;
  color: white;
  font-family: "georgia";
  font-size: 40px;
  font-weight: 800;
  text-shadow: 10px 10px 10px rgba(0,15,44,0.6);
}
.tagline-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.tagline {
  padding-left: 17px;
  font-weight: 300;
  letter-spacing: 6px;
  font-size: 50px;
  text-align: center;
  text-shadow: 3px 3px 5px rgba(0,15,44,0.73);
}

.cta-section {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.cta {
  letter-spacing: 2px;
  padding-left: 8px;
  font-weight: 300;
  text-shadow: 2px 2px 3px rgba(0,15,44,1);
  padding-bottom: 0.4%;
}

@media only screen and (max-width: 768px) {
  .logo-container {
    display: none;
  }
  .cclogo {
    display: none;
  }
  .tagline-container {
    display: none;
  }
  .tagline {
    display: none;
  }

  .intro-nav {
    display: none;
  }

  .cta-section {
    display: none;
  }

  .cta {
    display: none;
  }


}

@media only screen and (min-width: 768px) {
  .logo-container-2 {
    display: none;
  }
}

任何帮助将不胜感激！！！

【问题讨论】：

你能把你的代码放在某个地方吗？ JSFiddle，所以我们可以尝试一下——最好只用最少的 HTML 就足以证明问题？
可能不需要 HTML。在 768px 处有一个“不舒服”的断点，可以解释 IOS 问题。我认为这会发生在您缩小开发人员窗口的宽度时。电脑也是？ - 我不确定，有兴趣听听。
这很奇怪，断点在所有其他页面上的相同实现中工作。此外，一切都在我的 macbook pro 上以开发模式运行 safari 进行检查，只有在部署后它才会中断，所以我超级无能

标签： html css reactjs sass gatsby

【解决方案1】：

如果没有看到创建着陆页导航的 HTML，很难知道这是否是完整的答案，但这些设置可能值得一看（可能还有其他设置）

@media only screen and (max-width: 768px) {
  .mobile-landing-nav {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
  }
}

@media only screen and (min-width: 768px) {
  .mobile-landing-nav {
    display: none;
  }
}

尺寸为 768x1024 的 IOS 机器将通过这两项测试，并且使用的那台将具有 display: none。这是故意的吗？

还有其他的，例如：

@media only screen and (min-width: 768px) {
  .background-container img {
    display: none;
  }

哪个 768x1024 设备会通过 - 所以它有点移动，但大到足以被视为非移动设备？？

【讨论】：