Typo mail trop petite sur iOS, réduite à cause de la signature

victor789
Les bases HTML/CSS

Salut à tous,

Je suis graphiste et assez débutant en code, je travaille sur une signature de mail pour un client, pour sa nouvelle identité visuelle.

Je ne pouvais pas faire afficher la police de caractères que j'ai choisie pour sa signature de mail sur tous les ordinateurs ou mobiles (ce n'est pas une typo système), j'ai donc décidé de réaliser cette signature comme une image et enfin de la diviser en plusieurs cellules dans un tableau HTML.

Tout d'abord, la signature est apparue deux fois plus grande que prévu, comme si les images de mon tableau HTML avaient doublé leur taille en pixels, mais perdu en qualité (la typo était pixélisée).

J'ai donc essayé de diviser par deux l'échelle globale de mon tableau avec la propriété CSS "transform : scale(0.5) ;", pour corriger ce comportement et afficher les images du tableau à une taille convenable (pour que la typo soit bien nette).

Suite à cette modification, cela fonctionnait bien sur la version desktop, mais j'ai alors remarqué que sur l'app iOS Mail, la taille de la police du corps du mail (le message) était également divisée par deux, comme si elle suivait le comportement que j'avais appliqué au tableau de ma signature...

Je trouve cette taille de police trop petite et j'aimerais qu'elle conserve sa taille par défaut, sans être affectée par la signature.

Existe-t-il un moyen de conserver la taille de police par défaut avec cette signature, sur tous les devices, en particulier sur iPhone ?

J'ai essayé plusieurs solutions (meta tag, webkit-text-size-adjust...) pour empêcher ce comportement mais elles n'ont pas fonctionné, ou sûrement les ai-je mal utilisées dans mon code... ?

Merci d'avance pour votre aide !

Voici le code que j'utilise pour la signature :

<!DOCTYPE html>
<html>
<head>
        <meta charset="UTF-8">
        <meta name="x-apple-disable-message-reformatting">
        <meta name="viewport" content="width=device-width">
        <title>Tonale - Antoine Lachaux</title>
        <style type="text/css">
            body {
                -ms-text-size-adjust: 100%;
                -webkit-text-size-adjust: 100%;
            }
        </style>
</head>

<body>
<div>
    <p>
    </p>
</div>
<div style="transform: scale(0.5); transform-origin: top left;">
<table cellpadding="0" cellspacing="0">
    <tr>
        <td style="vertical-align:top;" valign="top">
            <img src="http://tonale-architecture.fr/wp-content/uploads/2023/03/tonale-mail-antoine-A1.jpg" alt="Antoine Lachaux - architecte associé"/>
        </td>
        <td style="vertical-align:top;" valign="top">
            <img src="http://tonale-architecture.fr/wp-content/uploads/2023/03/tonale-mail-antoine-A2.jpg" alt="&nbsp;"/>
        </td>
    </tr>
    <tr>
        <td style="vertical-align:top;" valign="top">
            <a href="tel:+33676337813">
            <img src="http://tonale-architecture.fr/wp-content/uploads/2023/03/tonale-mail-antoine-B1.jpg" alt="+33 6 76 33 78 13"/>
            </a>
        </td>
        <td style="vertical-align:top;" valign="top">
            <a href="https://www.instagram.com/atelier_anima" target="_blank">
            <img src="http://tonale-architecture.fr/wp-content/uploads/2023/03/tonale-mail-antoine-B2.jpg" alt="Instagram"/>
            </a>
        </td>
    </tr>
    <tr>
        <td style="vertical-align:top;" valign="top">
            <img src="http://tonale-architecture.fr/wp-content/uploads/2023/03/tonale-mail-antoine-C1.jpg" alt="&nbsp;"/>
        </td>
        <td style="vertical-align:top;" valign="top">
            <a href="https://tonale-architecture.fr/" target="_blank">
            <img src="http://tonale-architecture.fr/wp-content/uploads/2023/03/tonale-mail-antoine-C2.jpg" alt="Site internet"/>
            </a>
        </td>
    </tr>
    <tr>
        <td style="vertical-align:top;" valign="top">
            <img src="http://tonale-architecture.fr/wp-content/uploads/2023/03/tonale-mail-antoine-D1.jpg" alt="Tonale"/>
        </td>
        <td style="vertical-align:top;" valign="top">
            <img src="http://tonale-architecture.fr/wp-content/uploads/2023/03/tonale-mail-antoine-D2.jpg" alt="atelier d’architecture"/>
        </td>
    </tr>
</table>
</div>
</body>
</html>

Ce que je veux

Je souhaite garder ce design pour ma signature (tableau réduit de moitié), mais garder la taille de typo par défaut pur ce qui est du corps du mail.

Ce que j'obtiens

Pour l'instant la taille de typo du corps du mail est divisée par 2 sur iPhone, elle semble suivre le comportement de la signature du mail.

Aucune réponse