android – Samsung E-Mail App auto fit content destroy responsive?-ThrowExceptions

Exception or error:

I created a html e-mail with responsive/mobile design. It worked well in nearly every client and desktop, also outlook.

my header:

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
html style="width:100%;font-family:arial, 'helvetica neue', helvetica, sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;padding:0;Margin:0;">
head>
meta charset="UTF-8"> 
meta http-equiv="Content-Type" content="text/html charset=UTF-8"/>
meta content="width=device-width, initial-scale=1" name="viewport"> 
meta name="x-apple-disable-message-reformatting"> 
meta http-equiv="X-UA-Compatible" content="IE=edge"> 
meta content="telephone=no" name="format-detection"> 
title>test</title> 
  !--[if (mso 16)]>
    style type="text/css">
    a {text-decoration: none;}
    /style>
    ![endif]--> 
  !--[if gte mso 9]><style>sup { font-size: 100% !important; }
    /style>
  ![endif]--> 
style type="text/css">
@media only screen and (max-width:600px) {p, ul li, ol li, a { font-size:14px!important; line-height:150%!important } h1 { font-size:12px!important; text-align:center; line-height:120%!important } h2 { font-size:12px!important; text-align:center; line-height:120%!important } h3 { font-size:12px!important; text-align:center; line-height:120%!important } h1 a { font-size:12px!important } h2 a { font-size:12px!important } h3 a { font-size:12px!important } .es-menu td a { font-size:14px!important } .es-header-body p, .es-header-body ul li, .es-header-body ol li, .es-header-body a { font-size:14px!important } .es-footer-body p, .es-footer-body ul li, .es-footer-body ol li, .es-footer-body a { font-size:11px!important } .es-infoblock p, .es-infoblock ul li, .es-infoblock ol li, .es-infoblock a { font-size:13px!important } *[class="gmail-fix"] { display:none!important } .es-m-txt-c, .es-m-txt-c h1, .es-m-txt-c h2, .es-m-txt-c h3 { text-align:center!important } .es-m-txt-r, .es-m-txt-r h1, .es-m-txt-r h2, .es-m-txt-r h3 { text-align:right!important } .es-m-txt-l, .es-m-txt-l h1, .es-m-txt-l h2, .es-m-txt-l h3 { text-align:left!important } .es-m-txt-r img, .es-m-txt-c img, .es-m-txt-l img { display:inline!important } .es-button-border { display:inline-block!important } a.es-button { font-size:16px!important; display:inline-block!important } .es-btn-fw { border-width:10px 0px!important; text-align:center!important } .es-adaptive table, .es-btn-fw, .es-btn-fw-brdr, .es-left, .es-right { width:100%!important } .es-content table, .es-header table, .es-footer table, .es-content, .es-footer, .es-header { width:100%!important; max-width:600px!important } .es-adapt-td { display:block!important; width:100%!important } .adapt-img { width:100%!important; height:auto!important } .es-m-p0 { padding:0px!important } .es-m-p0r { padding-right:0px!important } .es-m-p0l { padding-left:0px!important } .es-m-p0t { padding-top:0px!important } .es-m-p0b { padding-bottom:0!important } .es-m-p20b { padding-bottom:20px!important } .es-mobile-hidden, .es-hidden { display:none!important } .es-desk-hidden { display:table-row!important; width:auto!important; overflow:visible!important; float:none!important; max-height:inherit!important; line-height:inherit!important } .es-desk-menu-hidden { display:table-cell!important } table.es-table-not-adapt, .esd-block-html table { width:auto!important } table.es-social { display:inline-block!important } table.es-social td { display:inline-block!important } }
#outlook a {
    padding:0;
}
.ExternalClass {
    width:100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
    line-height:100%;
}
.es-button {
    mso-style-priority:100!important;
    text-decoration:none!important;
}
a[x-apple-data-detectors] {
    color:inherit!important;
    text-decoration:none!important;
    font-size:inherit!important;
    font-family:inherit!important;
    font-weight:inherit!important;
    line-height:inherit!important;
}
.es-desk-hidden {
    display:none;
    float:left;
    overflow:hidden;
    width:0;
    max-height:0;
    line-height:0;
    mso-hide:all;
}
.es-button-border:hover a.es-button {
    background:#00418a!important;
    border-color:#00418a!important;
}
.es-button-border:hover {
    background:#00418a!important;
    border-style:solid solid solid solid!important;
    border-color:#00418a #00418a #00418a #00418a!important;
}
td .es-button-border-1:hover {
    border-style:solid solid solid solid!important;
    background:#00418a!important;
    border-color:#00418a #00418a #00418a #00418a!important;
}
td .es-button-border:hover a.es-button-2 {
    background:#00418a!important;
    border-color:#00418a!important;
}
#MessageViewBody a {
    color: inherit;
    text-decoration: none;
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
    line-height: inherit;
}
/style> 
/head> 

I erased < tags.

If I deactivate the auto fit content option in the settings of the Samsung email app, the email is shown responsive like it should.

Do someone know this problem or has anybody an idea to solve this issue? Is it a bug?

I only was able to test it on iPhone and Samsung galaxy s10 (Android 10)

Thanks

Erik

How to solve:

Leave a Reply

Your email address will not be published. Required fields are marked *