Question Existe-t-il une méthode pour désactiver la fonctionnalité de redimensionnement automatique de l'application Gmail dans la mise en page d'un e-mail?


Je dépose un courriel à afficher sur les navigateurs et les plates-formes mobiles, et la plupart du temps, tout se passe bien. Il est présenté sous forme de tableaux, utilisant un style en ligne, etc. Cependant, malgré une requête média à l'effet d'une largeur maximale de 600 pixels, l'application Gmail sur au moins mon Android et moi-même avons choisi de redimensionner les images et mise en page pour tenir dans sa zone au lieu d'utiliser la requête média ou la laisser s'intégrer normalement dans la fenêtre, l'une ou l'autre serait correcte.

Pour un usage personnel, je peux désactiver le redimensionnement automatique de mon téléphone, puis le courrier électronique s'affiche comme s'il était dans un navigateur.

Existe-t-il un moyen de demander à l'application Gmail de ne pas redimensionner automatiquement la taille de l'e-mail ou d'utiliser la requête multimédia à la place?


10
2017-08-22 19:00


origine


Réponses:


Comme Google le fait lui-même (sic!) ici vous devriez ajouter un petit hack sur votre modèle, juste après votre <body> marque:

<!-- Gmail hack -->
<div style="display:none; white-space:nowrap; font:15px courier; color:#ffffff; line-height:0; width:600px !important; min-width:600px !important; max-width:600px !important;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>
<!-- /Gmail hack -->

Comme Gmail et Inbox ignorent le display:none, le hack n'affectera que ces deux clients.


10
2018-06-09 16:04



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

Ensuite, réglez le style attribut sur une image (1px gif fonctionne) qui couvre toute la largeur de la page (style="min-width:600px;"). Tout sera mis en page correctement, et ce sera défilable.

Gmail en général ne supporte pas les requêtes de média, ni la balise de style en général, ce qui explique pourquoi nous devons tout déplacer en ligne.


11
2017-08-22 19:41



Inspiré par css-tricks.com, ce bloc de code a résolu mon problème. Placez-le juste avant </body>.

<table class="gmail-app-fix">
    <tr>
        <td>
            <table cellpadding="0" cellspacing="0" border="0" align="center" width="600">
                <tr>
                    <td cellpadding="0" cellspacing="0" border="0" height="1"; style="line-height: 1px; min-width: 200px;">
                        <img src="transparent.gif" width="200" height="1" style="display: block; max-height: 1px; min-height: 1px; min-width: 200px; width: 200px;"/>
                    </td>
                    <td cellpadding="0" cellspacing="0" border="0" height="1"; style="line-height: 1px; min-width: 200px;">
                        <img src="transparent.gif" width="200" height="1" style="display: block; max-height: 1px; min-height: 1px; min-width: 200px; width: 200px;"/>
                    </td>
                    <td cellpadding="0" cellspacing="0" border="0" height="1"; style="line-height: 1px; min-width: 200px;">
                        <img src="transparent.gif" width="200" height="1" style="display: block; max-height: 1px; min-height: 1px; min-width: 200px; width: 200px;"/>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

(Testé avec Gmail 6.0 et Inbox 1.20 sur Android 5.0.1, résolution 720x1280 (fonctionne en orientation portrait et paysage)).


1
2018-03-30 20:18



Je viens d'ajouter style = "min-width: 290px;" à ma table la plus externe, qui est la plus petite taille que ma vue d'e-mails réactifs affiche et qui s'est arrêtée de bouger autour de mes blocs et ne se redimensionne pas automatiquement. Cela signifie que dans l'application Gmail, l'e-mail apparaît comme un e-mail complet.


-1
2017-10-22 12:23