CODEWITHSUNDEEP
iosmacosemailhtml-email
alopez02
alopez02

Reputation: 1524

Email signature set up on iPhone renders with larger font size in other clients

I've created the following email signature using MacOs Sierra Mail.

Content-Transfer-Encoding: quoted-printable
Content-Type: text/html;
    charset=us-ascii
Message-Id: <25BE5C1D-06F0-4554-9226-A293B8E402CB>
Mime-Version: 1.0 (Mac OS X Mail 10.3 \(3273\))

<body style="padding:0;font-size:12px;font-family: Helvetica, Arial, sans-serif;font-weight:bold;word-wrap: break-word; -webkit-line-break: after-white-space;">
<br />
<br />
<br />

<p style="margin:0;padding:0;color:#6C5AB6;font-size:12px;font-weight:bold;font-family: Helvetica, Arial, sans-serif;">My Name</p>
<p style="margin:0;padding:0;color:#6C5AB6;font-size:12px;font-weight:bold;font-family: Helvetica, Arial, sans-serif;">Job Title</p>
<a href="tel:+555555555" style="display:block;margin:0;padding:0;text-decoration:none !important;border:none !important;color:#000000;font-size:12px;font-weight:bold;font-family: Helvetica, Arial, sans-serif;">+555555555 </a>
<br />
<p style="margin:0;padding:0;color:#000000;font-weight:bold;font-size:12px;font-family: Helvetica, Arial, sans-serif;text-decoration:none !important;">Address Line 1</p>
<p style="margin:0;padding:0;color:#000000;font-weight:bold;font-size:12px;font-family: Helvetica, Arial, sans-serif;text-decoration:none !important;">Address Line 2</p>
<a  href="#" style="margin:0;padding:0;color:#000000;border:none !important;text-decoration:none !important;font-weight:bold;font-size:12px;font-family: Helvetica, Arial, sans-serif;">mywebsite.com</a>
<br />
<br />
<br />
<br />

<a href="#" style="border:none !important";><img src="signature_photo.png" style="height:90px;width:383px"></></a>

<p style="margin:40px 0;padding:0;font-family: Helvetica, Arial, sans-serif;color:#919191;font-weight:300;font-size:10px;width:100%;">PRIVILEGED - PRIVATE AND CONFIDENTIAL. This communication and any files transmitted with it, are intended solely for the named addressee(s) only and may contain information which is confidential, legally privileged and are subject to copyright. No part of this email can be reproduced without consent of the Copyright owner. If you receive this email and you are not the addressee, intended recipient (or responsible for the delivery of the email to the addressee), please do not read, use, distribute or copy this email. Please delete the email and notify the author immediately.</p>
</body>

The html renders as expected in this client as well as in Gmail. However, since I'd like to set up the same html signature in my iOS Mail I followed this guide. It advises to (1) copy the signature received in iOS mail, (2) pasting it in Settings > Mail > Signatures, and (3) calling and undo, just after pasting it, to avoid iOS including additional code that disrupts the format.

It all seems to look as it should in the iPhone preview and in the emails to be sent via the mobile phone but after sending some test emails I realised both OSX Mail and Gmail render the signature with a font-size of 17px instead of the 12px specified in the inline CSS.

Initially I had the font-size specification in the body tag but I've included it in each line now hoping it could solve the issue but it hasn't.

Any clues on why this may be happening would be really appreciated.

Upvotes: 2

Views: 4109

Answers (1)

Ted Goas
Ted Goas

Reputation: 7567

iOS could be auto-scaling the text. Apple sometimes adds/remove/changes the zooming mechanism inside mail, which can throw styled email code for a loop. Adding this to the <head> should disable auto-scale entirely.

<meta name="x-apple-disable-message-reformatting">

More on this bug.

Not sure what's tripping Gmail up, but have you tried adding a viewport in the <head>? 

<meta name="viewport" content="width=device-width">

Upvotes: 4

Related Questions