Gérer la taille de police minimum sur iPhone et iPad

Il peut arriver que votre intégration emailing apparaisse cassée sous iPhone et iPad. Ce problème est peut-être dû à la police. En effet, la police peut apparaître plus grande que prévue sur iPhone et iPad. Nous allons voir pourquoi nous rencontrons ce problème et comment le résoudre facilement.

Pourquoi est-ce que ma police est automatiquement redimensionnée sur iPhone/iPad ?

En fait, afin de faciliter la lecture des emails sur iPhone et iPad, Apple a décidé d’automatiquement redimensionner les polices qui lui paraissait trop petit. En effet, par défaut, la taille de police minimum sur iPhone et iPad est 13px.
Ceci signifie donc que si vous avez du texte avec une taille de police inférieure à 13px, votre texte sera automatiquement affichée avec une taille de 13px. Or ce redimensionnement automatique peut créer des problèmes dans votre design d’email.

Voici un exemple fourni par CampaignMonitor
Redimensionnement du texte sous iPhone et iPad
Sur cette image, on voit que le texte « Forward | Unsuscribe | View in Browser » a été redimensionné avec une taille de 13px. Le texte « View in Browser » est alors sur 2 lignes, ce qui n’était pas prévu au début.
Ce problème est assez récurrent dans l’emailing et peut provoquer quelques tirages de cheveux. Heureusement des solutions existes.

Comment modifier la taille minimum de la police sur iPhone/iPad ?

Il est possible d’éviter ce problème. Il faut alors ajouter ce style CSS dans le header de l’email :


<style type="text/css">
	@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
		 body {
		  -webkit-text-size-adjust:100%;
		  -ms-text-size-adjust:100%;
		 }
		}
		@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
		 body {
		  -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;
		 }
		}
		@media only screen and (-webkit-min-device-pixel-ratio : 1.5),
		only screen and (min-device-pixel-ratio : 1.5) {
		 body {
		  -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;
		 }
	}
</style>

Ce code doit être inséré dans le header de l’email, entre les balises head:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html style="margin-top: 0px !important; padding-top: 0px !important; width: 100%">
<head>
  <style type="text/css">
     /* CODE A PLACER ICI */
  </style>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Ma Newsletter</title>
</head>

Votre texte devrait alors s’affichait avec la taille que vous aviez décider, sans aucun redimensionnement automatique.

J’espère que cette astuce vous sera utile. N’hésitez pas à laisser un commentaire si vous rencontrez un problème.

2 reflexions sur “Gérer la taille de police minimum sur iPhone et iPad

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ne manquez jamais une mise à jour. Inscrivez-vous pour recevoir un email lorsque nous publions quelque chose de nouveau dans le blog.

Vous recevrez au maximum un email une fois par mois. Nous ne partagerons jamais votre adresse email et nous détestons les spams.