IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

HTML Discussion :

Email en html qui bug sur iphone


Sujet :

HTML

  1. #1
    Futur Membre du Club
    Profil pro
    Inscrit en
    Avril 2010
    Messages
    7
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2010
    Messages : 7
    Points : 5
    Points
    5
    Par défaut Email en html qui bug sur iphone
    Bonjour,

    J'envoi un Email en html 5 et j'ai un problème d'affichage sur iPhone (4, 5, 6).

    Si mes images sont en 350 pixels ou moins, tout se passe bien.
    Dès que je passe les images à 400 pixels ou plus, le texte est mangé par l'image.

    Mon code vérifié est le suivant :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title><span style="" >Nouveau</span></title>
    <meta name="viewport" content="width=device-width">
    <style>
    body
    {
    background-color:#FFFFFF; /* blanc par défaut */
    color: #000000; /* noir par défaut */ 
    border: 0px solid black; /* opx par défaut */
    padding:10px;
    }
    </style>
    </head>
    <body style="margin:auto;max-width:600px;">
    <p style="text-align:center;"><img src="http://www.goallcomm.com/wp-content/uploads/2014/07/DesktopPC1-300x225.jpg" alt="DesktopPC1-300x225.jpg" width="350"></p>
    <p style="text-align:justify;"><span style="font-family: 'Georgia';color: #262626;" >En pathologie, comme en histoire, chaque si&egrave;cle a son caract&egrave;re ind&eacute;pendant et pr&eacute;cis ou tend &agrave; le rev&ecirc;tir. Celui qui vient de finir para&icirc;t, plus que tout autre, s'&ecirc;tre donn&eacute; le tort ou le m&eacute;rite de continuer activement la tradition. Poursuivant avec une inlassable &eacute;nergie sa marche en avant sur la voie du progr&egrave;s universel, son heureuse &eacute;toile lui a permis de br&ucirc;ler les &eacute;tapes et de jalonner ostensiblement les approches du but. </span><span style="font-family: 'Georgia';color: #262626;font-weight: bold;" >Nul de ses devanciers n'a boulevers&eacute; par suite, au m&ecirc;me degr&eacute; que lui, les id&eacute;es, les m&oelig;urs et les coutumes que les g&eacute;n&eacute;rations se transmettaient avec un pieux souci, mais fauss&eacute; par la conception erron&eacute;e d'une intangible stabilit&eacute;.</span></p>
    <p style="text-align:center;"><img src="http://www.steoil.com/wp-content/uploads/2011/11/V4_kit_full-300x251.png" alt="V4_kit_full-300x251.png" width="350"></p>
    <p style="text-align:justify;"><span style="font-family: 'Georgia';color: #262626;" >Les effets naturels de cette r&eacute;action excessive contre la torpeur du pass&eacute; devaient in&eacute;vitablement se traduire par la rupture de l'&eacute;quilibre normal, sans lequel l'intime collaboration du moral et du physique aboutit fatalement au surmenage de l'un ou de l'autre, et, le plus souvent, de ces deux indissolubles facteurs du bien-&ecirc;tre social ou individuel.</span></p>
    <p style="text-align:justify;"></p>
    <p style="text-align:justify;"></p>
    </body>
    </html>
    J'ai essayé pas mal de choses, mais rien n'y fait.
    Et mon code est bon selon :
    https://validator.w3.org/nu/#textarea

  2. #2
    Membre régulier
    Homme Profil pro
    Développeur Web
    Inscrit en
    Janvier 2016
    Messages
    39
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Loiret (Centre)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Janvier 2016
    Messages : 39
    Points : 87
    Points
    87
    Par défaut
    Bonjour JulienMac,

    Bienvenue dans les joies de l'intégration des emails !

    Pour faire simple, je pense que ton code ne fonctionne pas sur bien d'autres clients mails que ceux d'Iphone.
    La raison est simple : les emails doivent être en HTML4 et en structure tableaux hyper stricte.

    Les interpréteurs des clients mails sont très en retard sur le reste du web, tu ne peux pas faire du HTML5. Qui plus est, chaque client mail a son propre interpréteur, ça change tout le temps.
    Par exemple, je pense que ton style ne fonctionne pas sur gmail, car gmail ignore la balise style dans le HTML.

    Pour faire un email, tu utilises une structure en tableaux (table, tr, td) imbriqués subtilement pour donner la forme de ce que tu recherches. Pour le style général, tu dois utiliser le style inline. Pour les textes, tu utilises les balises font avec du style inline. Il est important de définir la taille de toutes les cellules et de tous les tableaux, sinon certains clients mails prendront leurs aises.

    Enfin, sache que beaucoup de styles ne fonctionnent pas sur tous les clients mails, je te redirige vers ce tableau de campainmonitor qui me sert actuellement de référence pour ça : https://www.campaignmonitor.com/css/b/.

    Bon courage à toi

Discussions similaires

  1. Réponses: 8
    Dernier message: 28/08/2013, 20h08
  2. Macro qui bug sur une condition
    Par Bernard67 dans le forum Macros et VBA Excel
    Réponses: 3
    Dernier message: 19/06/2009, 11h11
  3. OnMouseOut qui bug sur IE
    Par dembroski dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 11/06/2007, 22h28
  4. [HTML] click lien sur une cellule et page qui s'ouvre dans une autre cellule
    Par mariogarcia dans le forum Balisage (X)HTML et validation W3C
    Réponses: 26
    Dernier message: 24/05/2006, 14h37
  5. [2.0] Get sur une variable d'application qui bug ??
    Par brousaille dans le forum ASP.NET
    Réponses: 8
    Dernier message: 14/03/2006, 05h08

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo