iPad Pro 上不显示某些项目

Question

某些项目未在 iPad 空中显示。

如果您查看此页面：https://xposed-837fc.web.app/magazin-online

在“Professionalism.Promptitudine.Perfectionare.”下，您会发现一些带有图像的项目。但是在 iPad Air 上不显示。

我在 Chrome 上测试了它的所有尺寸，它们出现了，即使使用 iPad Pro 模拟器，它与 Air 具有几乎相同的规格并且它可以工作。但是在 iPad Air 上没有。

有人知道为什么吗？

我找不到任何合乎逻辑的解释

iPad空气

来自 Chrome

的 iPar Pro 模拟器

项目地图组件

function ProjectsMap({ projects }) {
  const sectionData = {
    title: "Profesionalism. Promptitudine. endl Perfectionare.",
    subtitle: "PORTOFOLIU",
    description:
      "Oferim servicii de programare de inalta calitate. Fie ca vorbim de un simplu site de prezentare sau de o Aplicatie Mobila, proiectul tau are aceeasi importanta pentru noi. Facem ideea ta sa fie realitate in cel mai scurt timp posibil. Avem grija la toate detaliile proiectului tau. Produsul final va fi exact ceea ce iti doresti. Ne place sa invatam lucruri noi. In fiecare zi, ne perfectionam in ceea ce stim deja. Suntem deschisi intotdeauna la noile trenduri ale industriei si dornici sa ne adaptam.",
  }

  return (
    <div className="projects">
      <TextSection data={sectionData} />
      <div className="projects__container">
        {projects.map(project => {
          return (
            <Link
              style={{ backgroundImage: `url(${project.picture})` }}
              className="projects__item"
              key={project.title}>
              <div className="projects__item__overlay">
                <span>{project.title}</span>
              </div>
            </Link>
          )
        })}
      </div>
    </div>
  )
}

SCSS

.projects {
  padding: 100px 90px;

  &__container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }

  &__item {
    width: 50%;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    aspect-ratio: 16 / 9;
    transition: all 1.2s;

    &:hover {
      background-size: 130%;
    }

    &__overlay {
      position: relative;
      width: 100%;
      height: 100%;
      z-index: 1;
      transition: all 0.3s;
      display: flex;
      align-items: center;
      justify-content: center;

      &:hover {
        background-color: rgba(0, 0, 0, 0.5);
        background-size: 150% !important;

        span {
          display: block;
        }
      }

      span {
        display: none;
        color: #fff;
        font-size: 36px;
        text-shadow: 0px 3px 5px gray;
      }
    }
  }
}

@media (max-width: 990px) {
  .projects {
    padding: 100px 30px;

    &__container {
      grid-template-columns: 100%;
    }
  }
}

@media (max-width: 600px) {
  .projects__item {
    width: 100%;
  }
}

Answer 1

aspect-ratio is not supported 在您 iOS 的 Safari 版本中。它将在版本 15 中可用。

您可以在此期间使用 this padding trick。

iPad Pro 上不显示某些项目

Some items doesn't display on iPad Pro

html

javascript

css

responsive-design

web