MI
0
Scaling of Images on Retina Displays
Hi,
I have been facing issue of scaling images on Outlook of Retina Display[**dell xps 13**]. Machine has 4K resolution which is zoomed to 225% on windows-10.
I tried every thing and tried all solutions from differnet portals but nothing worked. Any one can help me out to fix this issue, its urgent.
I followed this solution:
https://blog.jmwhite.co.uk/2014/03/28/solving-dpi-scaling-issues-with-html-email-in-outlook/
<------------ HTML ----------->
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Base Email Template</title>
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<style type="text/css" media="screen">
html { background-color: #edf2f8; }
body { width: 600px !important; }
.ExternalClass { display: block !important; width: 100%; }
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100%; }
body, p, h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; }
body, p, td { font-family: Helvetica, Arial, sans-serif; font-size: 15px; color: #333333; }
body * { font-family: Helvetica, Arial, sans-serif; }
h1 { font-size: 24px; font-weight: normal; line-height: 24px; }
body, p { margin-bottom: 0; -webkit-text-size-adjust: none; -ms-text-size-adjust: none; font-family: calibri !important }
img { outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; }
a img { border: none; }
.background { background-color: #edf2f8; margin: 0 auto; }
table.background { margin: 0; padding: 0; width: 600px !important;}
.block-img { display: block; line-height: 0; }
a { color: white; text-decoration: none; }
a, a:link { color: #2A5DB0; text-decoration: underline; }
table td { border-collapse: collapse; }
td { vertical-align: top; text-align: left; }
.wrap { width: 600px; }
.wrap-cell { padding-top: 30px; padding-bottom: 30px; }
.header-cell, .body-cell, .footer-cell { padding-left: 20px; padding-right: 20px; }
.header-cell { background-color: #4f616b; font-size: 20px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; padding-top: 8px; padding-bottom: 8px; vertical-align: middle !important; }
.body-cell { background-color: #ffffff; padding-top: 15px; padding-bottom: 20px; text-align: center; }
.footer-cell { color: #fff; font-size: 12px; padding: 6px 0px; display: table-cell; text-align: center; vertical-align: middle !important; background: #f26f21; }
.footer-cell a { color: #fff; }
.card { width: 400px; margin: 0 auto; }
.data-heading { text-align: right; padding: 10px; background-color: #ffffff; font-weight: bold; }
.data-value { text-align: left; padding: 10px; background-color: #ffffff; }
.force-full-width { width: 100% !important; }
</style>
<style type="text/css" media="only screen and (max-width: 600px)">
@media only screen and (max-width: 600px) {
body[class*="background"], table[class*="background"], td[class*="background"] { background: #eeeeee !important; }
table[class="card"] { width: auto !important; }
td[class="data-heading"], td[class="data-value"] { display: block !important; }
td[class="data-heading"] { text-align: left !important; padding: 10px 10px 0; }
table[class="wrap"] { width: 100% !important; }
td[class="wrap-cell"] { padding-top: 0 !important; padding-bottom: 0 !important; }
}
</style>
</head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0" bgcolor="" class="background">
<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="600" class="background">
<tr>
<td align="center" valign="top" width="100%" class="background"><center>
<table cellpadding="0" cellspacing="0" width="600" class="wrap">
<tr>
<td valign="top" class="wrap-cell" style="padding-top:30px; padding-bottom:30px;"><table cellpadding="0" cellspacing="0" class="force-full-width">
<tr>
<td colspan="2" height="109" width="600" align="center" style="width: 600px; height: 109px;"><!--[if mso]> <center> <table width="600"><tr><td width="600" height="109" class="outlookemail"><![endif]-->
<img src="http://ultrabotlms3.knowledgeplatform.com/M1/Learner/images/bannerlage.png" width="600" height="109" alt=""/><!--[if mso]> </td></tr></table> </center><![endif]--></td>
</tr>
<tr>
<td valign="top" colspan="2" class="body-cell"><table cellpadding="0" cellspacing="0" width="100%" bgcolor="#ffffff">
<tr>
<td valign="top" style="background-color:#ffffff; font-family: Helvetica, Arial, sans-serif; font-size: 13px; font-weight: normal; color: #000; line-height: 18px; text-align: left;"> Dear <b> Username </b><br/>
<br/>
<p>Thank you for signing up for account. You will receive a confirmation email once your account has been created.</p>
<br/>
<p>In the meantime if you have any questions, please feel free to contact us at 123 456 789.</p>
<br/>
<p>Thank you for using System,</p>
<br/>
<b> Google HR </b> <br/>
<a href=""> http://www.google.com </a></td>
</tr>
</table></td>
</tr>
<tr>
<td colspan="2" height="2"></td>
</tr>
<tr>
<td valign="middle" colspan="2" height="30" class="footer-cell" style="font-family: Helvetica, Arial, sans-serif;"> Copyright text here. 2017 </td>
</tr>
</table></td>
</tr>
</table>
</center></td>
</tr>
</table>
</body>
</html>
Hi Mohsin,
Please try below HTML source code.
Hope this helps you.
Thanks
Deep Thaker
Hi Deep,
Thank you so much for reviewing. I tried but nothing worked. I noticed you moved following code from <head> to outside the <head>.
I was following below article to fix this issue, but its does not work in my case and causing issue on "Dell XPS 13" and working perfect on all other machines.
https://blog.jmwhite.co.uk/2014/03/28/solving-dpi-scaling-issues-with-html-email-in-outlook/
Thanks
Hi,
The resolution is very high, it's rarely used.
Please try this.
I don't know is working or not.
Let me know if this works.
Thanks