CODEWITHSUNDEEP
iphonehtml-email
Mrvonwyl
Mrvonwyl

Reputation: 347

On iPhone 6 (and probably others) my simple HTML emails are display with stupidly large font

I have a little application for a customer which sends some confirmation and info mails. This all works pretty good. However, when I view such an email on an iPhone it looks something like this: https://i.sstatic.net/GGyvo.png

I have tried it as follows, because this bring iphones safari, to not mess with the font. In the email (which on android devices looks beautiful) this won't work, somehow.

<html>
<style type="text/css">
    body, p{
        -webkit-text-size-adjust: none;
    }
</style>
<body>
<font face="arial" size="10px">
<%=in.temp.str7%>
</font>
</body>
</html>

Upvotes: 1

Views: 185

Answers (3)

Mrvonwyl
Mrvonwyl

Reputation: 347

You led the right way, but your tips alone did not work. I now have added a doctype and cleaned up everything a bit. I also got rid of the font tag (which, as I found out, is not supported in html 5 anymore). Anyway, I do not know, what exactly solved the problem, but this is certainly a good base and working fine:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <style>
        body{
            font-family: Arial,​Helvetica,​ sans-serif !important;
            font-size: 14px !important;
            -webkit-font-smoothing: antialiased !important;
            -webkit-text-size-adjust: none !important;
        }
    </style>
<head>
<body>
    <%=in.temp.str7%>
</body>
</html>

Upvotes: 0

Gortonington
Gortonington

Reputation: 3597

Try adding:

<meta name="viewport" content="width=device-width, maximum-scale=1, minimum-scale=1, user-scalable=no"/>

to head tag and moving the -webkit-text-size-adjust: none;to inline inside the body tag and font tag like so - <body style="-webkit-text-size-adjust: none;"> or heck do both and keep it in the header too.

Honestly the issue may come from other stylings or elements in your html affecting the scale (hopefully solved with viewport) so please keep in mind if you are importing content into this template from an outside source, it may be retaining styling that can affect how it is rendered.

Upvotes: 1

Shannon White
Shannon White

Reputation: 94

Setting the viewport scale might help.

<meta name="viewport" content="width=device-width, initial-scale=1">

Upvotes: 3

Related Questions