瞎折腾

头脑风暴 QQ邮箱适配记录

1周前 (10-17)   231  
感慨

已经是2020了,手机查看HTML邮件的体验怎么还那么差?

在国内,说到邮箱推送,那你一定绕不开QQ邮箱。
即使有其他邮箱,相信大部分人也会再做一个QQ邮箱转发,没办法,目前提醒最及时,使用体验最好的反倒是“微信”客户端。
单单一个实时推送,好多邮箱客户端都做不到。
现在很少有人使用电脑查看邮件了吧?如果您基本不用手机查看邮件的话,那下边的就不用看了。

发现问题

众所周知,WordPress 的默认邮件界面真的是什么样式都没有,简直朴素到令人发指。
只能自己做美化,可你一旦有这个想法,接下来就会遇到一个大坑。
QQ邮箱客户端默认是完全过滤 <style> 标签的,并且不支持 @media 属性。

解决问题

到这里之前的经验就完全无用武之地了,我们通常的思路都是先做PC端,然后通过 @media 来适配移动端。
很长一段时间,我都在百度查找解决办法,希望通过邮箱专属标记属性来适配QQ邮箱。可始终没能解决。
最近突发奇想,为什么不能先做移动端的页面,然后通过 @media 和 <style> 标签来适配PC端呢?说做就做。

实现思路

由于QQ邮箱不支持 <style> 和 @media 的特性,我们优先考虑移动端,然后把需要在PC端显示的元素加一个 display: none
然后通过下边的代码来让他在PC端正常的显示。同理,很多属性也都可以用这个方法正确适配移动端和PC端了。

<style> 
    @media (min-width: 576px){.***{display: block!important;}} 
</style>
图例

PC端

移动端(左边为正常适配,右边的为错误适配)

总结

之所以这样另辟蹊径,完全是自己懂的太少,没办法正常的适配QQ邮箱客户端,只能反其道而行。
但俗话说的好,黑猫白猫,能抓住老鼠的才是好猫。只要能把问题解决,都是好办法。

版权声明:Jakehu 发表于 2020-10-17 19:38:17。
转载请注明:头脑风暴 QQ邮箱适配记录︱Jakehu

您可能感兴趣的

暂无评论

暂无评论...