Comment avoir l'apparence et la convivialité d'un HTML sur les appareils à écran-tutoriel CSS-php.cn

Comment avoir l'apparence et la convivialité d'un HTML sur les appareils à écran

Susan Sarandon

Libérer： 2024-09-21 06:26:32

original

994 Les gens l'ont consulté

How to Have the Look and Feel of An HTML on Screen devices

Comment avoir l'apparence et la convivialité du format A4 en HTML sur les appareils à écran

J'ai commencé à créer mon CV en utilisant une page HTML à l'ancienne et j'ai rapidement réalisé qu'elle ne fonctionnait pas immédiatement lorsqu'elle était ouverte sur un écran. Le contenu coule à l’infini, sans aucun saut de page, et il ne ressemble certainement pas à un document A4. Pour résoudre ce problème, j'ai dû appliquer quelques astuces, notamment du CSS et un peu de JavaScript.

Mes objectifs étaient :

Pour que mon CV ait la même apparence sur les écrans que lorsqu'il est imprimé.
Pour afficher des pages séparées à l'écran, de la même manière qu'un document PDF ou Google Docs.

Défis lors de la création d'un CV en HTML

Lorsque j'ai commencé à rédiger mon CV, j'ai vite réalisé que les navigateurs sur les appareils à écran ne respectaient pas les dimensions des pages comme le A4. Au lieu de cela, ils diffusent simplement le contenu en continu, ce qui signifie que le texte et les sections peuvent déborder sans aucun saut de page. Pour créer des pages distinctes basées sur les dimensions A4, je devais gérer manuellement les sauts de page chaque fois que le contenu dépassait la hauteur d'une page A4 typique.

La solution principale impliquait l'utilisation des propriétés d'impression et de saut de page CSS @media pour contrôler le comportement du contenu lorsqu'il est trop long pour une page et pour appliquer JavaScript pour gérer le contenu dynamique sur les écrans.

1. Sauts de page automatiques avec CSS (pour l'impression)

Pour garantir que le contenu circule correctement une fois imprimé, j'ai utilisé la propriété page-break-inside : eviter. Cette propriété empêche de diviser les éléments importants tels que les titres ou les gros paragraphes entre deux pages, permettant ainsi au navigateur de diviser automatiquement le contenu en pages selon les besoins.

Exemple HTML pour l'impression :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>A4 Styled Document</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="page">
    <h1>Title of Page 1</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
  </div>

  <div class="page">
    <h1>Title of Page 2</h1>
    <p>Content will automatically break into new pages for printing...</p>
  </div>
</body>
</html>

Copier après la connexion

CSS pour l'impression :

/* Define page layout for A4 size */
@media print {
  body {
    margin: 0;
    padding: 0;
  }

  .page {
    width: 210mm;
    height: 297mm;
    margin: 0;
    padding: 20mm;
    page-break-after: always; /* Automatically breaks after each page */
    box-shadow: none;
    overflow: visible; /* Ensures content flows properly when printing */
  }

  /* Prevent page breaks inside headers or large paragraphs */
  h1, h2, h3, p {
    page-break-inside: avoid;
  }
}

Copier après la connexion

Comment fonctionne ce CSS :

page-break-after : toujours ; garantit que le contenu sera divisé en une nouvelle page après chaque div .page en mode impression.
page-break-inside : éviter ; empêche les en-têtes ou les grandes sections d'être maladroitement répartis entre deux pages, ce qui est essentiel pour conserver un aspect propre et professionnel lors de l'impression.

2. Gestion des sauts de page à l'écran avec JavaScript

Bien que CSS puisse gérer les sauts de page pour l'impression, les périphériques d'écran ne fonctionnent pas de la même manière. Les navigateurs ne divisent pas automatiquement le contenu en pages distinctes à l'écran. J'avais donc besoin de JavaScript pour détecter lorsque le contenu dépasse la taille de la page A4 et le diviser dynamiquement en nouvelles pages.

Voici comment j'ai réussi :

JavaScript pour le fractionnement dynamique des pages :

window.onload = function () {
  const pages = document.querySelectorAll('.page');

  pages.forEach(page => {
    if (page.scrollHeight > page.clientHeight) {
      splitPageContent(page);
    }
  });
};

function splitPageContent(page) {
  const newPage = document.createElement('div');
  newPage.classList.add('page');

  const contentToMove = page.innerHTML.slice(page.clientHeight / 2); 
  newPage.innerHTML = contentToMove;
  page.innerHTML = page.innerHTML.slice(0, page.clientHeight / 2);

  // Insert the new page into the DOM after the current page
  page.parentNode.insertBefore(newPage, page.nextSibling);
}

Copier après la connexion

Pourquoi JavaScript est nécessaire :

À l'écran, contrairement à l'impression, le texte ne passe pas automatiquement d'un div .page à l'autre lorsqu'il déborde. Le navigateur laisse simplement le contenu déborder au-delà des limites de la page. Avec le code JavaScript ci-dessus, je détecte les débordements de contenu et je le divise en une nouvelle page, simulant ainsi l'expérience multipage que vous attendez dans un PDF ou Google Docs.

3. Assurer un flux de pages cohérent à l'écran et à l'impression

Avec cette approche, le contenu se comporte de manière cohérente sur tous les appareils :

À l'écran : JavaScript détecte le débordement de contenu et crée des div .page supplémentaires si nécessaire. Cela simule l'expérience de visualisation d'un document A4, où vous pouvez faire défiler des pages soigneusement divisées.
En impression : les propriétés d'impression et de saut de page CSS @media gèrent les sauts de page automatiques pour l'impression, de sorte que votre document aura l'air tout aussi soigné sur papier.

Conclusion

Créer un document HTML qui imite l'apparence des pages A4 sur les appareils à écran nécessite une combinaison de CSS et de JavaScript. Si CSS seul peut gérer efficacement l’aspect impression, JavaScript est essentiel pour gérer les sauts de page à l’écran. En combinant les deux, vous pouvez garantir une expérience fluide, avec un texte fluide sur les pages, à la fois à l'écran et sur papier.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!