Pourquoi la taille de police dans le courrier d'iPhone si minuscule? Je devais passer à l'échelle de 26px

Question

Je travaille sur un modèle d'e-mail réactif pour mon employeur. Pour la taille de bureau, j'ai pu laisser la taille de police par défaut à 16px et juste utiliser rem pour ajuster les tailles si nécessaire. Il semble bien sur le bureau, dans Gmail, et est entièrement réactif. Cependant, lorsqu'elle est affichée dans Mail sur iPhone, la police est SO SMALL. J'ai dû ajouter une requête multimédia qui augmente la taille de police de base à 26px pour obtenir des tailles de police raisonnables dans l'e-mail. J'ai essayé de faire des recherches, mais il ne semble pas que d'autres personnes aient eu à faire de même. Il y a très peu de CSS dans le code, mais voici ce que j'ai:

body, table, td, a, p, span {-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;} 

@media screen and (max-width: 600px) { 

    html, td { 
     font-size: 26px !important; 
     line-height: 1.3; 
    } 
} 

J'ai aussi

<meta name="viewport" content="width=device-width, initial-scale=1"> 

Il y a un autre CSS avoir à faire avec le redimensionnement d'images, avec des marges, etc. mais c'est le seul CSS traitant des tailles de police (toutes les informations de rem sont inline donc elles ne sont pas effacées par Bronto/Gmail). Si je le redimensionne dans le navigateur à une taille mobile, le texte semble massif, mais lorsqu'il est vu sur mon iPhone, il est superbe. Je suis préoccupé par le fait que cela puisse être une bizarrerie de l'iPhone et qu'elle aura l'air massive sur d'autres types d'appareils. Quelqu'un at-il une idée?

Answer 1

D'accord, enfin compris. Heureusement, je passais en revue tous nos modèles d'e-mails et l'un d'entre eux n'avait pas d'image de héros. Devine quoi? La taille de police a semblé massive sur le mobile pour le modèle imageless! Ainsi, après quelques essais, je trouve que

img { 
    width: 100% !important; 
} 

complètement résolu la question, de sorte que maintenant la taille de police réelle correspond à ce qui est défini dans le CSS. Malgré toute la largeur: 100% des styles définis sur l'image elle-même et sur ses conteneurs parent, d'une certaine façon l'image doit avoir été trop grande et a déclenché un redimensionnement de tout le contenu, je suppose? Si quelqu'un a une explication, j'aimerais l'entendre.

Answer 2

Avez-vous entendu parler de la balise META viewport? Vous devriez envisager d'ajouter cette balise à la méta sur votre site. Soyez juste prudent car il pourrait manipuler d'autres éléments HTML que vous avez déjà configurés.

<meta name="viewport" content="width=device-width, initial-scale=1"> 

Voici un lien vers une page expliquant ce qu'il fait plus en détail.

https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag

Answer 3

FWIW, je pense que vous compliquez votre vie à essayer d'utiliser la propriété text-size-adjust. Selon le tableau de compatibilité du navigateur sur this MDN document, il ya un mauvais support de navigateur et son buggy.

Deuxièmement, la façon dont je lis this W3C doc Je ne pense pas que vous l'utilisez pour son usage prévu. W3C indique que

Ce module contient des fonctionnalités de CSS relatives à un éventuel mécanisme pour adapter les pages conçues pour les écrans d'ordinateur de bureau pour l'affichage sur des écrans plus petits, tels que ceux des téléphones mobiles ...

Son but est de fournir une solution pour les pages qui ont été conçues pour l'affichage de bureau seulement. Comme vous le savez, les pages Web plus anciennes qui n'utilisent pas la balise meta de viewport seront réduites pour s'adapter à la fenêtre d'affichage d'un périphérique mobile. Le problème avec ceci est que le texte devient souvent trop petit pour être lu et cette propriété text-size-adjust propose d'y remédier en agrandissant le texte sur les appareils mobiles.Je pense que si vous continuez à utiliser la méta-balise viewport, rendez votre template responsive, et les éléments de taille pour qu'ils s'affichent bien dans tous les devices, vous obtiendriez de bons résultats si vous n'utilisez pas text-size-adjust, c.-à-d. certains comme suit:

body, table, td, a, p, span {font-size:16px;} 

bonnes sources d'information sur le texte-size-adjust:
https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust?v=control https://drafts.csswg.org/css-size-adjust/#text-size-adjust
https://caniuse.com/#search=font-size-adjust

Bonne chance!

Answer 4

Voici un code à partir des modèles que j'utilise (où je ne vois pas cette question):

Essayez de faire vos <meta> étiquettes ressemblent plus à ceci:

<meta name="x-apple-disable-message-reformatting"> 
<meta name="viewport" content="width=device-width"> 

La première balise désactive l'auto -scale dans iOS 10 Mail, ce qui pourrait affecter la taille de votre texte. La deuxième étiquette définit la fenêtre d'affichage; forcer l'échelle initiale ne devrait pas être nécessaire et pourrait jeter votre conception.

---

Essayez aussi de déplacer les styles de carrosserie en ligne de l'étiquette à l'intérieur d'un <body> sélecteur universel dans <style>, comme ceci:

<style> 
    /* What it does: Stops email clients resizing small text. */ 
    * { 
     -ms-text-size-adjust: 100%; 
     -webkit-text-size-adjust: 100%; 
    } 
</style> 

<body width="100%" bgcolor="#ffffff" style="margin: 0; mso-line-height-rule: exactly;">