目前html邮件都支持手机屏幕,Html电子邮件不能在手机上阅读媒体查询

我是开发HTML电子邮件的新手,我遇到媒体查询问题。Html电子邮件不能在手机上阅读媒体查询

这就是发生了什么事情:当我完成我的电子邮件的开发并调整屏幕大小以检查它是否响应时,它按计划工作并适应任何屏幕大小。但是,使用MailChimp发送测试电子邮件以查看电子邮件是否实际响应后,我发现移动应用程序(如Outlook和Gmail)实际上并未将电子邮件大小调整为屏幕大小。

他们实际上做的字体和较小的图像,使整个内容与之相适应,好像它是一台笔记本电脑

有谁知道这是为什么发生的事情,我怎么能阻止它?

这是我head标签:

PROMONOTICIAS

/* Client-specific Styles */

#outlook a {padding:0;} /* Force Outlook to provide a "view in browser" menu link. */

body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;}

/* Prevent Webkit and Windows Mobile platforms from changing default font sizes, while not breaking desktop design. */

.ExternalClass {width:100%;} /* Force Hotmail to display emails at full width */

.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Force Hotmail to display normal line spacing. More on that: http://www.emailonacid.com/forum/viewthread/43/ */

#backgroundTable {margin:0; padding:0; width:100% !important; line-height: 100% !important;}

img {outline:none; text-decoration:none;border:none; -ms-interpolation-mode: bicubic;}

a img {border:none;}

.image_fix {display:block;}

p {margin: 0px 0px !important;}

table td {border-collapse: collapse;}

table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }

/*a {color: #e95353;text-decoration: none;text-decoration:none!important;}*/

/*STYLES*/

table[class=full] { width: 100%; clear: both; }

/*################################################*/

/*IPAD STYLES*/

/*################################################*/

@media only screen and (max-width: 640px) {

a[href^="tel"], a[href^="sms"] {

text-decoration: none;

color: #ffffff; /* or whatever your want */

pointer-events: none;

cursor: default;

}

.mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {

text-decoration: default;

color: #ffffff !important;

pointer-events: auto;

cursor: default;

}

table[class=devicewidth] {width: 440px!important;text-align:center!important;}

table[class=devicewidthinner] {width: 420px!important;text-align:center!important;}

table[class="sthide"]{display: none!important;}

img[class="bigimage"]{width: 420px!important;height:219px!important;}

img[class="col2img"]{width: 420px!important;height:258px!important;}

img[class="image-banner"]{width: 440px!important;height:106px!important;}

td[class="menu"]{text-align:center !important; padding: 0 0 10px 0 !important;}

td[class="logo"]{padding:10px 0 5px 0!important;margin: 0 auto !important;}

img[class="logo"]{padding:0!important;margin: 0 auto !important;}

}

/*##############################################*/

/*IPHONE STYLES*/

/*##############################################*/

@media only screen and (max-width: 480px) {

a[href^="tel"], a[href^="sms"] {

text-decoration: none;

color: #ffffff; /* or whatever your want */

pointer-events: none;

cursor: default;

}

.mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {

text-decoration: default;

color: #ffffff !important;

pointer-events: auto;

cursor: default;

}

td[class="mobile-title"]{font-size: 15px !important;}

a[class="mobile-text"]{font-size: 16px !important;}

td[class="mobile-disclaimer"]{font-size: 13px !important;}

table[class=devicewidth] {width: 320px !important;text-align:center!important;}

table[class=devicewidthinner] {width: 300px !important;text-align:center!important;}

table[class="sthide"]{display: none!important;}

img[class="bigimage"]{width: 300px !important;height:136px!important;}

img[class="col2img"]{width: 300px !important;height:160px!important;}

img[class="image-banner"]{width: 320px !important;height:68px!important;}

}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值