How to override gmail viewport in html email template?
Question
I'd developed a dating site in php which is having mobile version also. I'd designed an html email template and stored it in one folder with php variables which I'll replace while sending emails. What I want to do here is when any email which is sent from my site opens in mobile, it should not have an option to zoom the email. In my email template I'd below code.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,target-densitydpi=device-dpi, user-scalable=no" />
The email template if I am viewing in browser in mobile, it doesn't have an option to zoom, but if I am viewing the email in gmail app and I am able to zoom the emails.
Please let me know how to stop zoom functionality in Gmail. Thanks in advance.
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,target-densitydpi=device-dpi, user-scalable=no" /> </head> <body style="-webkit-text-size-adjust:none;"> <table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color:#000000; height:52px;"> <tr> <td align="center"> <center> <table border="0" cellpadding="0" cellspacing="0" width="600px" style="height:100%;"> <tr><td align="left" valign="middle" style="padding-left:20px;"><a href="SITENAME"><img src="SITENAME/images/logo.png" /></a></td></tr> </table> </center> </td> </tr> </table> <table width="100%" cellspacing="0" cellpadding="0" border="0"> <tbody> <tr> <td> <center> <table style="height:100%;" width="600px" cellspacing="0" cellpadding="0" border="0"> <tbody> <tr> <td style="padding-left:20px; padding-bottom:20px" valign="bottom" align="left"> <div style="color: #444444; font-family: Open Sans; font-size: 15px; line-height: 150%;text-align: left;"> {{EMAILCONTENT}} </div> </td> </tr> </tbody> </table> </center> </td> </tr> </tbody> </table> </body> </html>
1 answers
solution1
0 2017-04-10 09:49:06
Put this code on your DIV with emailcontent, where you declare font-family, font-size, etc..
.no-zoom {
touch-action: manipulation;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.