email-bugs
email-bugs copied to clipboard
hteumeuleu
Samsung not responsive when width attribute used in template
If you use a width attribute in a email template, perhaps in a table <table width="600"> or image <img width="600"> that sets a width wider than the viewport, Samsung will make the email that width.
It adds an inline width to the <body> elements of width:600px and the same to the wrapping <div> element that Samsung include. These can be identified as #MessageViewBody and #MessageWebViewDiv. These can be overridden with our CSS but now they are also adding a meta tag
<meta id="meta-viewport" name="viewport" content="width=686" contenteditable="false">
This meta tag cannot be overridden that I have found so far.
The only way I have found so far to avoid this is to not use width attribute and only style with CSS widths. However this can potentially create issue for Outlook on windows.
I have tried using CSS viewport to override the issue but no luck so far
@viewport {
min-width: 300px;
max-width: 400px;
}
This is due to the new (I think) 'Auto fit content' checkbox on Samsung mail. With it turned off, emails render as you would expect.
Ah yeah cheers @JayOram
In that case this can be put down to a bug in their auto fit logic. Currently it seems to only be looking at width attributes, it should maybe also consider media queries.
Tested this on the Samsung mail app yesterday and it's 100% affecting the appearance of the email. With it switched off, the email looked exactly how I wanted it to, however when it was switched on, it was making the width of the email too wide but still behaving responsively, so it was almost like a hybrid of a desktop/mobile email. Has anyone got any ideas on how to bypass this feature?
I agree with @M-J-Robbins this kind of thing shouldn't be happening. Samsung has bad enough rep with all the bloatware they install and unwanted samsung apps.
We don't need another internet explorer / outlook Samsung. Thanks.
I reported this on the Samsung Developers Forums (https://forum.developer.samsung.com/t/samsung-email-auto-fit-content-feature-ignores-css/11418).
@M-J-Robbins I'm not sure, but when I insert my email (which is for example 600px wide) in a 100% wide table, I have the responsive version displayed. Could you tell me if it works for you too?
@M-J-Robbins Well, instead of using this:
<table style="width:600px; margin:0px auto;" align="center" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><!-- email content --></td>
</tr>
</table>
try to use this:
<table style="width:100%;" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table style="width:600px; margin:0px auto;" align="center" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><!-- email content --></td>
</tr>
</table>
</td>
</tr>
</table>
@tdefossezbadsender The problem is Samsung Email (when the "auto fit content" feature is turned on) over-relies on the width tag attribute (regardless of the value of the width CSS property) to determine whether it needs to "shrink email content to fit the screen".
So we're not talking about:
<table style="width:600px;"></table>
But about:
<table width="600" style="width:100%;"></table>
And the same goes for img tags as it is good practice to set the width and height attributes:
<img src="https://via.placeholder.com/1200x675/FF0000/FFFFFF.png" alt="" width="1200" height="675" style="width:100%; height:auto;" />
@M-J-Robbins you confirm that I'm off-topic? Or have you tried what I'm proposing?
@tdefossezbadsender Yeah I'm still seeing the same issue with that code
@M-J-Robbins I've been chatting with @JayOram this morning as I'm having the exact same issue (but even with auto fit disabled, it shows desktop with a horizontal bar).
In Litmus, removing the old Samsung hack seems to have better rendering
#MessageViewBody, #MessageWebViewDiv { width: 100% !important; }
But only Samsung Mail (Android 7) is available to test in Litmus so i don't trust it yet. We're trying to sort a live device to test on and will report back!
@TaxiTweedy ah interesting.
I've just retested this morning on Samsung S21, Android 12, Email 6.1.61.1
Still seeing the same as before width="600" will add the meta viewport when autofit is on.
When it's off it works as expected.
#MessageViewBody, #MessageWebViewDiv { width: 100% !important; } doesn't appear to be making any difference on my very minimal test.
Let me know if you want a hand testing it, either share a code sample here or DM me some code and I can test it on my device.
After some further testing, it looks like I was led down a rabbit hole.
As @M-J-Robbins mentions above, removing #MessageViewBody, #MessageWebViewDiv { width: 100% !important; } makes no difference when width="600" is present.
If you add additional css specific to the above IDs, your email should work on Samsung Mail
e.g. #MessageViewBody .full_width {width:100% !important; height:auto !important; max-width:100% !important; min-width:100% !important;} #MessageWebViewDiv .full_width {width:100% !important; height:auto !important; max-width:100% !important; min-width:100% !important;}
Any media queries you have just add into the styles like the above and this should override any issues with autofit being enabled
@achau88 does this also work on tables that have had a width="600" attribute set on them (not a style="width:600px;")
Will try and give that a go later
We recently ran into this issue as well. We only use width=“600” on images for Outlook along side style=“width:100%;max-width:600px;” for everything else. I’ve not been able to get @achau88 ’s solution to work, but preliminary tests show that “hacking it” by putting width=“auto” width=“600” on the image overrides the auto fit issue.
I guess I found a workaround: https://mosaico.io/email-client-tricks/samsung-email-autowidth-breaks-repositivity/
If you don't want to read the whole story, here is the workaround:
@media screen and (max-width: 384px) {
.mail-message-content {
width: 414px !important;
}
}
It is not a 100% fix, as it will use a 400+px wide viewport (a bit larger than the 360px usually used in other mobile apps), but it works much better.
Finally got around to getting a Samsung test device after I had to return my old one and tested this fix. It's working great for me thanks @bago
One interesting thing I also noticed is that this works well for my @gmail.com address.
But when using my Microsoft @live.com address has a different issue, it doesn't appear to render media queries at all.
Also I think it's doing some auto scaling by pushing up the font size, maybe with a text-size-adjust because when I'm using em units everything looks good. But using with px it's not great
These examples have a few differences, they were from an old presentation showing different coding methods