Les appareils mobiles n'affichent pas correctement les cartes de mise en page réactives

Question

Description

Lors de la création de pages Web, tout fonctionnait comme prévu sur Chrome DevTools, jusqu'à ce que j'essaye la version mobile. Pourquoi cela arrive-t-il? Jamais rencontré un tel problème.

Étapes pour reproduire

C'est ce qui se passe avec la version de bureau.

Après avoir réduit la largeur :

C'est prévu. Lorsque j'ai activé la version mobile, celle-ci est devenue subitement indisponible :

Même en utilisant la classe flex + flex-wrap + flex-direction 或使用 grid + grid-template-columns: Repeat(auto-fit, minmax(250px, 1fr)); 的 .cards, cela ne fonctionne pas sur les appareils mobiles.

Environnement

Le code que j'ai utilisé est le suivant :

const data = [
  {
    CODIGO: "a1",
    NOME: "TESTING",
    CLASSE: "ALUNO",
  },
  {
    CODIGO: "a2",
    NOME: "TESTING",
    CLASSE: "ALUNO",
  },
  {
    CODIGO: "a3",
    NOME: "TESTING",
    CLASSE: "ALUNO",
  },
  {
    CODIGO: "a4",
    NOME: "TESTING",
    CLASSE: "ALUNO",
  },
  {
    CODIGO: "a5",
    NOME: "TESTING",
    CLASSE: "ALUNO",
  },
  {
    CODIGO: "a6",
    NOME: "TESTING",
    CLASSE: "ALUNO",
  },
];

const groupByKey = (list, key, { omitKey = false }) =>
  list.reduce((hash, { [key]: value, ...rest }) => {
    const item = omitKey ? rest : { [key]: value, ...rest };
    const group = hash[value] || [];
    return { ...hash, [value]: [...group, item] };
  }, {});

const result = groupByKey(data, "CLASSE", { omitKey: true });
const ALUNO = result.ALUNO;
const PROFESSOR = result.PROFESSOR;
const MIDIA = result.MIDIA;
const PASTOR = result.PASTOR;

document.addEventListener("DOMContentLoaded", function () {
  const listElements = {
    alunoList: document.getElementById("alunos"),
    professorList: document.getElementById("professores"),
    midiaList: document.getElementById("midia"),
    pastorList: document.getElementById("pastores"),
  };

  const createCard = (person, aluno = false) => {
    const card = document.createElement("div");
    card.classList.add("card");

    const cardImage = document.createElement("div");
    cardImage.classList.add("card__image");
    const image = new Image();
    image.src = `assets/img/${person.CODIGO}i.webp`;
    cardImage.appendChild(image);

    const cardContent = document.createElement("div");
    cardContent.classList.add("card__content");
    const cardTitle = document.createElement("div");
    cardTitle.classList.add("card__title");
    cardTitle.innerHTML = person.NOME;
    const cardText = document.createElement("p");
    cardText.classList.add("card__text");
    const cardLink = document.createElement("a");
    cardLink.setAttribute("target", "_blank");
    cardLink.setAttribute("href", `${person.CODIGO}.html`);
    const cardButton = document.createElement("button");
    cardButton.classList.add("btn");
    cardButton.classList.add("btn--block");
    cardButton.innerHTML = "Mais detalhes ➜";
    cardLink.appendChild(cardButton);
    cardContent.appendChild(cardTitle);
    cardContent.appendChild(cardText);
    cardContent.appendChild(cardLink);

    card.appendChild(cardImage);
    card.appendChild(cardContent);

    const li = document.createElement("li");
    li.classList.add("cards__item");
    li.appendChild(card);
    return li;
  };

  const addCardsToList = (personList, person, aluno = false) => {
    listElements[personList].appendChild(createCard(person, aluno));
  };

  ALUNO.forEach((person) =>
    addCardsToList("alunoList", person, (aluno = true))
  );
});

:root {
  --gray-darker: #444444;
  --gray-dark: #696969;
  --gray: #999999;
  --gray-light: #cccccc;
  --gray-lighter: #ececec;
  --gray-lightest: lighten(--gray-lighter, 4%);
  text-decoration: none;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  scroll-behavior: smooth;
}
a,
a:hover,
a:visited,
a:active,
a:link {
  text-decoration: none;
}
section {
  min-height: 100vh;
  width: 100%;
}
html {
  background-color: #f0f0f0;
}
body {
  color: var(--gray);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 400;
  padding: 1rem;
}
h1 {
  font-size: 5rem;
  padding: 3rem;
}
.cards {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  gap: 1rem;
}
.cards .card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: #fff;
  border-radius: 0.25rem;
  max-width: 300px;
  box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.25);
}
.cards .card:hover .card__image {
  filter: contrast(100%);
}
.cards .card__content {
  padding: 1rem;
}
.cards .card__content .btn {
  background-color: #fff;
  border: 1px solid var(--gray-light);
  border-radius: 1rem;
  color: var(--gray-dark);
  padding: 0.5rem;
  text-transform: lowercase;
  cursor: pointer;
  transition: all 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91);
}
.cards .card__content .btn:hover {
  background-color: #c00;
  color: #fff;
}
.cards .card__content .btn--block {
  width: 100%;
  height: 48px;
  font-size: 1.2rem;
}
.cards .card__image {
  filter: contrast(70%);
  overflow: hidden;
  position: relative;
  transition: filter 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91);
  height: 400px;
}
.cards .card__image img {
  width: 100%;
  max-height: 400px;
  -o-object-fit: contain;
  object-fit: contain;
}
.cards .card__title {
  color: var(--gray-dark);
  font-size: 1.7rem;
  font-weight: 300;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.cards .card__text {
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 1.25rem;
}
@media screen and (max-width: 600px) {
  h1 {
    font-size: 3rem;
    padding: 1.5rem;
  }
  .cards .card {
    margin-bottom: 1rem;
  }
  .cards .card__image {
    max-height: 200px;
  }
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
    <link rel="stylesheet" href="assets/style.css">
    <script defer src="assets/script.js"></script>

  </head>
  <body>
    <section>
      <h1>Alunos</h1>
      <ul class="cards" id="alunos"></ul>
    </section>
  </body>
</html>

Comme cela ne m’est jamais arrivé, je ne sais même pas par où commencer. Je sais que cela est dû au CSS, mais tous les conseils seraient les bienvenus.

Merci !

Answer 1

Essayez d'ajouter

dans votre balise head.