Comment simuler avec précision du papier A4 pour l'impression dans Chrome à l'aide de CSS ?

Ajustement du CSS pour simuler le papier A4 et activer une impression précise

Pour créer un papier A4 simulé sur le Web qui s'imprime avec précision dans Chrome, certains CSS des ajustements sont nécessaires. Bien que les dimensions fournies de 21 cm x 29,7 cm pour la taille de l'élément puissent sembler correctes, lors de l'impression ou de la génération d'un aperçu avant impression, la page est tronquée.

Résoudre le problème

Après une enquête plus approfondie, la cause première réside dans l'attribution de « initiale » à la largeur de la page dans la règle du support d'impression. L'utilisation de "initial" pour la largeur dans Chrome entraîne une mise à l'échelle si aucune valeur de longueur spécifique n'est définie pour ses éléments parents. Il en résulte que la page est trop longue et que le rembourrage est plus grand que les 2 cm prévus.

Solution

Pour remédier à ce problème, remplacez "initial" par le papier réel largeur (210 mm) et hauteur (297 mm) dans la règle du support d'impression. Appliquez-le à "html", "body" ou directement à l'élément ".page".

html, body {
  width: 210mm;
  height: 297mm;
}

Exemple

Le code CSS révisé suivant intègre le solution suggérée :

@page {
  size: A4;
  margin: 0;
}
@media print {
  html, body {
    width: 210mm;
    height: 297mm;
  }
  /* ... other print styles ... */
}

Compatibilité

Cette solution résout avec succès le problème d'impression dans Chrome (testé sur diverses plates-formes de système d'exploitation) tout en conservant la fonctionnalité dans d'autres navigateurs.

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!