Подпись электронной почты на основе HTML - проблема Android - PullRequest
Новая
       17

Подпись электронной почты на основе HTML - проблема Android

0 голосов
/ 12 мая 2019

Я пытаюсь создать подпись HTML в следующей структуре: 

TEXT-1                                  TEXT-2
TEXT                                    TEXT
TEXT                                    TEXT

PICTURE PICTURE PICTURE PICTURE

TEXT-1 и TEXT-2 должны иметь по 50% площади для каждого из них.

В iOS - работает нормально, на Android структура выглядит так: 

TEXT-1  TEXT-2
TEXT TEXT
TEXT TEXT

PICTURE    PICTURE    PICTURE    PICTURE

Я использую следующий код: 

<html lang="en" dir="ltr" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="x-apple-disable-message-reformatting">
    <style type="text/css">
            html,
            body {
                margin: 0 auto !important;
                padding: 0 !important;
                height: 100% !important;
                width: 100% !important;
    			direction:ltr;
            }
    
            /* What it does: Stops email clients resizing small text. */
            * {
                -ms-text-size-adjust: 100%;
                -webkit-text-size-adjust: 100%;
            }
    
            /* What it does: Centers email on Android 4.4 */
            div[style*="margin: 16px 0"] {
                margin:0 !important;
            }
    
            /* What it does: Stops Outlook from adding extra spacing to tables. */
            table,
            td {
                mso-table-lspace: 0pt !important;
                mso-table-rspace: 0pt !important;
            }
    
            table {
                border-spacing: 0 !important;
                border-collapse: collapse !important;
                table-layout: fixed !important;
                margin: 0 auto !important;
            }
            table table table {
                table-layout: auto;
            }
    		
            img {
                -ms-interpolation-mode:bicubic;
            }
    
            *[x-apple-data-detectors],	/* iOS */
            .x-gmail-data-detectors, 	/* Gmail */
            .x-gmail-data-detectors *,
            .aBn {
                border-bottom: 0 !important;
                cursor: default !important;
                color: inherit !important;
                text-decoration: none !important;
                font-size: inherit !important;
                font-family: inherit !important;
                font-weight: inherit !important;
                line-height: inherit !important;
            }
    
            .a6S {
                display: none !important;
                opacity: 0.01 !important;
            }
            img.g-img + div {
                display:none !important;
               }
    		   
            @media only screen and (min-device-width: 375px) and (max-device-width: 413px) { /* iPhone 6 and 6+ */
                .email-container {
                    min-width: 375px !important;
                }
            }
    tr {
    width: 100% !important;
    }
    td {
    	color:#000;
    }
    .left {
    	border-bottom: 5px solid #FEC025;
    }
    .right {
    }
    .bottom {
    	background: #DEDEE1;
    }
    .Website {
    	letter-spacing: 3px;
    }
    .Phone {
    	letter-spacing: 3px;
    }
    .Email {
    	letter-spacing: 3px;
    }
    .Address {
    	letter-spacing: 3px;
    }
    
    </style>
    
    </head>
    <body style="margin: 0; mso-line-height-rule: exactly;">
    
    <!--[if gte mso]>
        <table cellspacing="0" dir="ltr" width="100%"><tr><td dir="ltr" style="font-family: Arial; font-size: 10pt; direction: ltr; color: #fff; width: 500px; height: 100px; padding: 3px; vertical-align: top">
    <![endif]-->
    <div dir="ltr" style="float: left; font-family: Arial; font-size: 12pt; direction: ltr; color: #000; width: 500px; height: 100px; padding: 3px; vertical-align: top">
    	TEXT-1<br />
    	<strong>TEXT<br />
    	TEXT</strong>
    </div>
    <!--[if gte mso]>
        </td><td dir="ltr" style="font-family: Arial; font-size: 10pt; direction: ltr; color: #fff; width: 500px; height: 100px; padding: 3px; vertical-align: top">
    <![endif]-->
    <div dir="ltr" style="float: left; font-family: Arial; font-size: 12pt; direction: ltr; text-align: right; color: #000; width: 500px; height: 100px; padding: 3px; vertical-align: top">
    	<div class="Website">TEXT-2</div>
    	<div class="Phone">TEXT</div>
    	<div class="Email">TEXT</div>
    	<div class="Address">TEXT</div>
    </div>
    <!--[if gte mso]>
        </td></tr></table>
    <![endif]-->
    
    
    
    
    <!--[if gte mso]>
        <table cellspacing="0" width="100%"><tr><td class="mobile" style="font-family: Arial; font-size: 10pt; color: #fff; width: 200px; height: 100px; padding: 3px; vertical-align: top">
    <![endif]-->
    <div class="mobile" style="float: left; font-family: Arial; font-size: 12pt; text-align: center; color: #000; width: 200px; height: 100px; padding: 3px; vertical-align: top">
                <img style="width: 198px !important;text-align: center;" src="logo.jpg" />
    </div>
    <!--[if gte mso]>
        </td><td class="mobile" style="font-family: Arial; font-size: 10pt; color: #fff; width: 25%; height: 100px; padding: 3px; vertical-align: top">
    <![endif]-->
    <div class="mobile" style="float: left; font-family: Arial; font-size: 12pt; text-align: center; color: #000; width: 200px; height: 100px; padding: 3px; vertical-align: top">
                <img src="img1.png" /> <br />
    			Personalized Service
    </div>
    <div class="mobile-only"></div><!--[if gte mso]>
        </td><div class="mobile-only"></div><td class="mobile" style="clear: both; font-family: Arial; font-size: 10pt; color: #fff; width: 25%; height: 100px; padding: 3px; vertical-align: top">
    <![endif]-->
    <div class="mobile" style="clear: both; float: left; font-family: Arial; text-align: center; font-size: 10pt; color: #000; width: 200px; height: 100px; padding: 3px; vertical-align: top">
                <img src="img2.png" /> <br />
    			Extra Flexibility
    </div>
    <!--[if gte mso]>
        </td><td class="mobile" style="font-family: Arial; font-size: 10pt; color: #fff; width: 25%; height: 100px; padding: 3px; vertical-align: top">
    <![endif]-->
    <div class="mobile" style="float: left; font-family: Arial; font-size: 12pt; text-align: center; color: #000; width: 200px; height: 100px; padding: 3px; vertical-align: top">
                <img src="img3.png" /> <br />
    			Areas of Excellence<!--[if gte mso]>    
    </td></tr></table>
    <![endif]-->
    
    
    <table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr class="bottom">
    	<td width="100%">some text</td>
    </tr>
    </table>
    
    </body>
    </html>
...