0
我已經創建了一個電子郵件模板。它在瀏覽器中正常工作， 當我看到Android中的gmail應用程序中的相同設計它改變了設計。媒體查詢在Gmail應用程序中無法正常工作
我的代碼是在這裏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<!--<link href="fonts/AmericanTypewriter.ttc?family=AmericanType" rel="stylesheet">-->
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">
<style type="text/css">
/* @font-face {
font-family: AmericanType;
src: url(fonts/AmericanTypewriter.ttc);
}
@font-face {
font-family: ArchitectsDaughter;
src: url(fonts/ArchitectsDaughter.ttf);
}*/
/* CLIENT-SPECIFIC STYLES */
body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
img { -ms-interpolation-mode: bicubic; }
/* RESET STYLES */
img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; max-width: 100%;}
table { border-collapse: collapse !important; }
body { height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important; }
/* iOS BLUE LINKS */
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
/* MOBILE STYLES */
@media screen and (max-width: 480px) {
.img-max {
width: auto !important;
max-width: 100% !important;
height: auto !important;
}
.max-width {
max-width: 100% !important;
}
.mobile-wrapper {
width: 85% !important;
max-width: 85% !important;
}
.mobile-padding {
padding-left: 5% !important;
padding-right: 5% !important;
}
}
/* ANDROID CENTER FIX */
div[style*="margin: 16px 0;"] { margin: 0 !important; }
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" height="100%" valign="top" width="100%" bgcolor="#f6f6f6" style="padding: 50px 15px;" class="mobile-padding">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="515" class="mobile-wrapper">
<tr>
<td align="center" valign="top" style="font-family: 'Roboto Slab', Open Sans, Helvetica, Arial, sans-serif;">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td align="center" bgcolor="#ffffff" style="border-radius: 3px 3px 0 0;">
<img src="http://www.kevalam.com/mailform/img/gif-top.gif" alt="insert alt text here" style="display: block; border-radius: 3px 3px 0 0; font-family: sans-serif; font-size: 16px; color: #999999;" class="img-max"/>
</td>
</tr>
<tr>
<td align="center" bgcolor="#ffffff" style="border-radius: 0 0 3px 3px; padding: 20px;">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td align="center" style="font-family: 'Roboto Slab', Open Sans, Helvetica, Arial, sans-serif;font-weight: 100;">
<p style="font-size: 38px; color: #444444; margin: 0; padding-bottom: 10px;">Release your Stress!!</p>
<p style="font-size: 30px; color: #444444; margin: 0; padding-bottom: 10px;">All Print Design and Digital Solutions</p>
<p style="font-size: 40px; color: #444444; margin: 0; padding-bottom: 10px;">at one stop only</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" bgcolor="#ffffff" style="border-radius: 3px 3px 0 0;">
<div style="text-align: left; height: 305px; width: 580px; background: #fff url('http://www.kevalam.com/mailform/img/mrNext.png') no-repeat;background-color: #fff; background-image: url('http://www.kevalam.com/mailform/img/mrNext.png');background-repeat: no-repeat;background-position: center;background-size: cover;">
<!--<div style="text-align: left; height: 305px; width: 580px; margin:20px;">-->
<!--<div style="height:0px;">-->
<!--<img src="img/mrNext.png" alt="insert alt text here" style="display: block; border-radius: 3px 3px 0 0; font-family: sans-serif; font-size: 16px; color: #999999; margin: 20px;" class="img-max"/>-->
<!--</div>-->
<div style="display:inline-block;margin-left: 80px;margin-top: 80px;">
<p style="font-size: 20px;margin-bottom: 10px;">Release your stress</p>
<a href="http://www.kevalam.com/mailform/" target="_blank" style="font-size: 20px; font-family: 'Roboto Slab', Open Sans, Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none !important; border-radius: 0px; background-color: #85C226; padding: 10px 25px; display: block; outline: none;">Click Here →</a>
</div>
</div>
</td>
</tr>
<tr>
<td align="center" bgcolor="#ffffff" style="padding-bottom: 20px;border-radius: 3px 3px 0 0;">
<p style="display:inline-block;vertical-align: middle; margin-right: 20px;font-size: 20px;">A Union by</p>
<img src="http://www.kevalam.com/mailform/img/aayam_logo.png" alt="insert alt text here" style="display: inline-block;vertical-align: middle;width: 120px; border-radius: 3px 3px 0 0; font-family: sans-serif; font-size: 16px; color: #999999;" />
<span style="padding: 0px 10px;vertical-align: middle;display: inline-block;font-size: 40px;"> + </span>
<img src="http://www.kevalam.com/mailform/img/kevalam_logo.png" alt="insert alt text here" style="display: inline-block;vertical-align: middle;width: 120px; border-radius: 3px 3px 0 0; font-family: sans-serif; font-size: 16px; color: #999999;" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>你可以看到兩個
全屏截圖在瀏覽器 
小屏幕瀏覽器 
在Android的 