मैंने मूल रूप से एमजेएमएल का उपयोग करके एक ईमेल बनाया और मोबाइल संस्करण को बेहतर बनाने के लिए कोड को अनुकूलित किया।

1) क्रोम के साथ ईमेल की जांच करते समय और लिटमस के साथ सभी डेस्कटॉप क्लाइंट के साथ परीक्षण करते समय मुझे कोई समस्या नहीं है, लेकिन ईमेल स्टैक इनलाइन ब्लॉक का आईपैड संस्करण।

2) कुछ तत्व केवल मीडिया प्रश्नों का उपयोग करके मोबाइल पर प्रदर्शित होते हैं, ईमेल का परीक्षण करते समय दिखाई नहीं देते हैं जबकि मैं उन्हें क्रोम के साथ देख सकता हूं।

यहाँ मुद्दों का पूर्वावलोकन है: यहां चित्र विवरण दर्ज करें

एचटीएमएल फाइल का लिंक यहां दिया गया है: एचटीएमएल फाइल

यहाँ कोड की शुरुआत है:

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

<head>
  <title>Invitiation à l'avant-première "Quoi de neuf au moyen âge ?"</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  
  <!--[if !mso]><!-->
  <style type="text/css">
    @media (max-width:660px) {
      @-ms-viewport { width: 320px; }
      @viewport { width: 320px; }
    }  
  </style>
  <!--<![endif]-->

  <style type="text/css">
    #outlook a { padding: 0; }
    .ReadMsgBody { width: 100%; }
    .ExternalClass { width: 100%; }
    .ExternalClass * { line-height: 100%; }
    body { margin: 0; padding: 0; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
    table, td { border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
    img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; }
    p { display: block; margin: 13px 0; }
    .hidden-desktop {display: none!important; max-height: 0; font-size: 0; overflow: hidden; line-height: 0; mso-hide: all;}
  
    @media (min-width:660px) {
      .mj-column-per-100, * [aria-labelledby="mj-column-per-100"] { width: 100%!important; }
      .mj-column-px-200, * [aria-labelledby="mj-column-px-200"] { width: 200px!important; }
      .mj-column-px-30, * [aria-labelledby="mj-column-px-30"] { width: 30px!important; }
      .mj-column-px-430, * [aria-labelledby="mj-column-px-430"] { width: 430px!important; }
      .mj-column-px-410, * [aria-labelledby="mj-column-px-410"] { width: 410px!important; }
      .mj-column-px-20, * [aria-labelledby="mj-column-px-20"] { width: 20px!important; }
    }       
    @media (max-width:659px) {
      .mj-column-per-100, * [aria-labelledby="mj-column-per-100"] { width: 280px!important; display: block!important; margin: 0 auto; }
      .mj-column-px-200, * [aria-labelledby="mj-column-px-200"] { width: 280px!important; display: block!important; margin: 0 auto; }
      .mj-column-px-30, * [aria-labelledby="mj-column-px-30"] { width: 0px!important; }
      .mj-column-px-430, * [aria-labelledby="mj-column-px-430"] { width: 280px!important; display: block!important; margin: 0 auto; }
      .mj-column-px-410, * [aria-labelledby="mj-column-px-410"] { width: 280px!important; display: block!important; margin: 0 auto; }
      .mj-column-px-20, * [aria-labelledby="mj-column-px-20"] { width: 0px!important; }   
      .invitation-desktop { display: none!important; }  
      .image-expo { height: 400px!important; background-repeat: no-repeat!important; }
      .hidden-desktop{ display: block!important; max-height: none!important; font-size: 12px; line-height: 1.5!important; overflow: visible!important; }
      .mobile-space{ height: 20px; }
      .mobile-auto-height{ height: auto!important; }
      .hidden-mobile{ display: none!important }
      .logo-table { width: 80px!important; float: left; }
      .logo-padding { padding: 7px!important; }
      .logo { width:66px!important;height:66px!important; }
      .invitation-mobile-title{ width: 200px; float: left; height: 80px;}
      .social-mobile{ width: 80px!important; height: 80px; display: inline-block!important; }
      .social-space-mobile { width: 20px!important; }      
    }     
  </style>  


  <!--[if mso]>
  <xml>
    <o:OfficeDocumentSettings>
      <o:AllowPNG/>
      <o:PixelsPerInch>96</o:PixelsPerInch>
    </o:OfficeDocumentSettings>
  </xml>
  <![endif]-->

  <!--[if !mso]><!-->  
  <link href="https://fonts.googleapis.com/css?family=Lato:300,400,500,700" rel="stylesheet" type="text/css">
  <!--<![endif]-->
 

</head>

<body style="background: #e8e8e8;">
  <div style="background-color:#e8e8e8;">

  <!--[if mso | IE]>
  <table border="0" cellpadding="0" cellspacing="0" width="660" align="center" style="width:660px;">
    <tr>
      <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
      <![endif]-->

        <div style="margin:0 auto;max-width:660px;">
          <table cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;" align="center" border="0">
            <tbody>
              <tr>
                <td style="text-align:center;vertical-align:top;font-size:0px;padding:0px;">

                <!--[if mso | IE]>
                <table border="0" cellpadding="0" cellspacing="0">
                  <tr>
                    <td style="vertical-align:top;width:660px;">
                    <![endif]-->

                      <div aria-labelledby="mj-column-per-100" class="mj-column-per-100" style="vertical-align:top;display:inline-block;font-size:13px;text-align:left;width:100%;">
                        <table cellpadding="0" cellspacing="0" width="100%" border="0">
                          <tbody>
                            <tr>
                              <td style="word-break:break-word;font-size:0px;padding:15px;" align="center">
                                <div style="cursor:auto;color:#a6a6a6;font-family:'Lato', Arial, sans-serif;font-size:11px;font-weight:300;line-height:13px;text-transform:none;">
                                  Vous avez des problèmes d’affichage ?
                                  <a href="#" style="font-weight: 300; font-size: 11px; text-transform: none; font-family:'Lato', Arial, sans-serif; color:#a6a6a6">
                                    Visualiser cet email en ligne
                                  </a>
                                </div>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </div>

                      <!--[if mso | IE]>
                    </td>
                  </tr>
                </table>
                <![endif]-->

                </td>
              </tr>
            </tbody>
          </table>
        </div>

      <!--[if mso | IE]>
      </td>
    </tr>
  </table>
  <![endif]-->

  <!--[if mso | IE]>
  <table border="0" cellpadding="0" cellspacing="0" width="660" align="center" style="width:660px;">
    <tr>
      <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
      <![endif]-->

        <div style="margin:0 auto;max-width:660px;">
          <table cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;" align="center" border="0">
            <tbody>
              <tr>
                <td style="text-align:center;vertical-align:top;font-size:0px;padding:0px;">

                  <!--[if mso | IE]>
                  <table border="0" cellpadding="0" cellspacing="0">
                    <tr>
                      <td style="vertical-align:top;width:200px;">
                      <![endif]-->

                        <div aria-labelledby="mj-column-px-200" class="mj-column-px-200" style="vertical-align:top;display:inline-block;font-size:13px;text-align:left;width:200px;">
                          <table class="logo-table" cellpadding="0" cellspacing="0" style="vertical-align:top;background:#fff;" width="100%" border="0">
                            <tbody>
                              <tr>
                                <td class="logo-padding" style="word-break:break-word;font-size:0px;padding:25px;" align="center">
                                  <table cellpadding="0" cellspacing="0" style="border-collapse:collapse;border-spacing:0px;" align="center" border="0">
                                    <tbody>
                                      <tr>
                                        <td style="width:150px;">
                                          <img class="logo" alt="" title="" height="150px" src="http://bank.digital-expression.fr/universcience/logo-cite.png" style="border:none;display:block;outline:none;text-decoration:none;width:100%;height:150px;" width="150">
                                        </td>
                                      </tr>
                                    </tbody>
                                  </table>
                                </td>
                              </tr>
                            </tbody>
                          </table>

                          <!--[if !mso]><!-->
                          <table class="hidden-desktop invitation-mobile-title" cellpadding="0" cellspacing="0" width="200px" border="0" style="border-collapse:collapse;border-spacing:0px;">
                            <tbody>
                              <tr>
                                <td width="20px">
                                </td>
                                <td width="180px">
                                  <table cellpadding="0" cellspacing="0" style="vertical-align:top;" width="100%" border="0">
                                    <tbody>
                                      <tr>
                                        <td style="word-break:break-word;font-size:0px;padding:11px 0px;background-color:#d81921;" align="center">
                                          <div style="cursor:auto;color:#ffffff;font-family:'Lato', Arial, sans-serif;font-size:28px;font-weight:400;line-height:28px;text-transform:uppercase;">Invitation</div>
                                        </td>
                                      </tr>
                                      <tr>
                                       <td style="word-break:break-word;font-size:0px;padding:0px 0px;background-color:#000" align="center">
                                          <div style="cursor:auto;color:#ffffff;font-family:'Lato', Arial, sans-serif;font-size:15px;font-weight:400;line-height:30px;text-transform:uppercase;">
                                            <span style="letter-spacing: 3px">
                                              avant-première
                                            </span>
                                          </div>
                                        </td>
                                      </tr>
                                    </tbody>
                                  </table>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                          <div style="clear:both;"></div>
                          <!--<![endif]-->                          
                        </div>
                         



                      <!--[if mso | IE]>
                      </td>
                      <td style="vertical-align:top;width:30px;">
                      <![endif]-->

                        <!--[if !mso]><!-->
                        <div class="mobile-space hidden-desktop" style="font-size:1px;line-height:30px;">&nbsp;</div>
                        <!--<![endif]--> 

                        <div aria-labelledby="mj-column-px-30" class="mj-column-px-30" style="vertical-align:top;display:inline-block;font-size:13px;text-align:left;width:30px;">
                          <table cellpadding="0" cellspacing="0" width="100%" border="0">
                            <tbody>
                            </tbody>
                          </table>
                        </div>

                      <!--[if mso | IE]>
                      </td>
                      <td style="vertical-align:top;width:430px;">
                      <![endif]-->

                        <div aria-labelledby="mj-column-px-430" class="mj-column-px-430" style="vertical-align:top;display:inline-block;font-size:13px;text-align:left;width:430px;">
                          <table cellpadding="0" cellspacing="0" style="vertical-align:top;" width="100%" border="0">
                            <tbody>
                              <tr>
                                <td style="word-break:break-word;font-size:0px;padding:0px;" align="left">
                                  <div class="image-expo" style="margin:0 auto;height:200px;max-width:430px;background:#f2b3b7 url(http://bank.digital-expression.fr/universcience/bg-expo.jpg) bottom right / 430px 200px no-repeat;">

                                    <!--[if mso | IE]>
                                    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:430px;">
                                    <v:fill origin="0.5, 0" position="0.5,0" type="tile" src="http://bank.digital-expression.fr/universcience/bg-expo.jpg" />
                                    <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
                                    <![endif]-->

                                    <table class="image-expo" cellpadding="0" cellspacing="0" height="200px" style="font-size:0px;width:100%;height:200px;background:#f2b3b7 url(http://bank.digital-expression.fr/universcience/bg-expo.jpg) bottom right / 430px 200px no-repeat;" align="center" border="0" background="http://bank.digital-expression.fr/universcience/bg-expo.jpg">
                                      <tbody>
                                        <tr>
                                          <td style="text-align:center;vertical-align:top;font-size:0px;padding:0px;">

                                          <!--[if mso | IE]>
                                            <table border="0" cellpadding="0" cellspacing="0">
                                              <tr>
                                                <td style="vertical-align:top;width:410px;">
                                                <![endif]-->

                                                  <div aria-labelledby="mj-column-px-410" class="mj-column-px-410" style="vertical-align:top;display:inline-block;font-size:13px;text-align:left;width:100%;">
                                                    <table cellpadding="0" cellspacing="0" style="vertical-align:top;" width="100%" border="0">
                                                      <tbody>
                                                        <tr>
                                                          <td style="word-break:break-word;font-size:0px;padding:0px;">
                                                            <div style="font-size:1px;line-height:20px;">&nbsp;</div>
                                                          </td>
                                                        </tr>
                                                        <tr>
                                                          <td style="word-break:break-word;font-size:0px;padding:0px 0px 0px 20px;" align="left">
                                                            <div style="cursor:auto;color:#ffffff;font-family:'Lato', sans-serif;font-size:30px;font-weight:700;line-height:30px;text-transform:uppercase;">
                                                              Quoi de neuf<br> au moyen âge ?
                                                            </div>
                                                          </td>
                                                        </tr>
                                                        <tr>
                                                          <td style="word-break:break-word;font-size:0px;padding:0px;">
                                                            <div style="font-size:1px;line-height:20px;">&nbsp;</div>
                                                          </td>
                                                        </tr>
                                                        <tr>
                                                          <td style="word-break:break-word;font-size:0px;padding:0px 0px 0px 20px;" align="left">
                                                            <div style="cursor:auto;color:#ffffff;font-family:'Lato', sans-serif;font-size:14px;font-weight:400;line-height:16px;text-transform:uppercase;">
                                                              TOUT CE QUE L’ARCHEOLOGIE<br> NOUS RÉVÈLE
                                                            </div>
                                                          </td>
                                                        </tr>
                                                        <tr>
                                                          <td style="word-break:break-word;font-size:0px;padding:0px;">
                                                            <div style="font-size:1px;line-height:10px;">&nbsp;</div>
                                                          </td>
                                                        </tr>
                                                        <tr>
                                                          <td style="word-break:break-word;font-size:0px;padding:0px 0px 0px 20px;" align="left">
                                                            <div style="cursor:auto;color:#ffffff;font-family:'Lato', sans-serif;font-size:40px;font-weight:700;line-height:40px;text-transform:uppercase;">
                                                              <a href="#" style="color: #ffffff; text-decoration: none; padding: 0px">+</a>
                                                            </div>
                                                          </td>
                                                        </tr>
                                                      </tbody>
                                                    </table>
                                                  </div>

                                                <!--[if mso | IE]>
                                                </td>
                                                <td style="vertical-align:top;width:20px;">
                                                <![endif]-->

                                                  <div aria-labelledby="mj-column-px-20" class="mj-column-px-20" style="vertical-align:top;display:inline-block;font-size:13px;text-align:left;width:100%;">
                                                    <table cellpadding="0" cellspacing="0" style="vertical-align:top;" width="100%" border="0">
                                                      <tbody>
                                                      </tbody>
                                                    </table>
                                                  </div>

                                                <!--[if mso | IE]>
                                                </td>
                                              </tr>
                                            </table>
                                            <![endif]-->

                                          </td>
                                        </tr>
                                      </tbody>
                                    </table>
                                  
                                    <!--[if mso | IE]>
                                    </v:textbox>
                                    </v:rect>
                                    <![endif]-->
                                  
                                  </div>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                      
                      <!--[if mso | IE]>
                      </td>
                    </tr>
                  </table>
                  <![endif]-->

                </td>
              </tr>
            </tbody>
          </table>
        </div>
        
      <!--[if mso | IE]>
      </td>
    </tr>
  </table>
  <![endif]-->
      
  <!--[if mso | IE]>
  <table border="0" cellpadding="0" cellspacing="0" width="660" align="center" style="width:660px;">
    <tr>
      <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
      <![endif]-->

        <div class="mobile-space" style="font-size:1px;line-height:30px;">&nbsp;</div>

      <!--[if mso | IE]>
      </td>
    </tr>
  </table>
  <![endif]-->



  ...I can't put the complete code on my post to be under 30000 signs.

  </div>
</body>
</html>    

मदद के लिए शुक्रिया,

1
P. Wack 25 अगस्त 2016, 19:25

2 जवाब

सबसे बढ़िया उत्तर

वैसे यह आईओएस 9 और div के बीच रिक्त स्थान के साथ एक आम समस्या है। भले ही फ़ॉन्ट-आकार 0px पर सेट हो, यह कार्य करता है जैसे कि यह अभी भी यहां है। आपको अपने HTML को फिर से अच्छा दिखाने के लिए उसे छोटा करना होगा।

मैंने यह आपके लिए किया: http://pastebin.com/0RX92bat और यहां बताया गया है कि यह iPad रेटिना पर लिटमस पर कैसा दिखता है मेल के साथ http://imgur.com/DfziId3

समान परिणाम प्राप्त करने के लिए आप https://github.com/kangax/html-minifier का उपयोग कर सकते हैं इन विकल्पों के साथ:

{ collapseWhitespace: true,
  removeEmptyAttributes: true,
  minifyCSS: true }
2
iRyusa 25 अगस्त 2016, 20:01

मैं कई बार इस समस्या का सामना कर चुका हूं और सबसे आसान समाधान जो मैंने पाया है, वह है प्रत्येक display: inline-block; में एक margin: 0 -2px; जोड़ना:

`<div style="display: inline-block; margin: 0 -2px;">`

वेब पर भी यही समस्या मौजूद है, जैसा कि Fight the Space में बताया गया है सीएसएस ट्रिक्स पर इनलाइन-ब्लॉक तत्वों के बीच। यदि आप नकारात्मक मार्जिन हैक पसंद नहीं करते हैं तो इस लेख में कुछ अन्य उदाहरण शामिल हैं।

0
Ted Goas 25 अगस्त 2016, 21:00