如何针对华为设备Android 10邮件客户端编写有效定向适配CSS规则

原有代码失效原因 #

• 你用到的body[data-outlook-cycle]是Outlook客户端专属属性，和华为自带邮件无关联，规则不会触发
• pointer媒体查询用于匹配外接指针设备，华为触屏设备默认不会命中该规则
• -webkit-full-screen伪类hack针对旧版Safari设计，华为定制WebView内核不会识别该匹配规则
• 嵌套类选择器（.foo .hide-for-large）在华为邮件内核中解析失败率很高，容易被内核过滤

可用适配方案 #

定向CSS Hack（仅命中华为EMUI 10/Android 10自带邮件） #

/* 华为EMUI 10+ 自带邮件专属适配规则 */
_:-webkit-highlight, :root .hide-for-large {
  display: none !important;
}

额外适配注意事项 #

• 所有样式规则必须写在HTML头部的<style>标签内，华为邮件会自动过滤body内以及页面底部的样式标签
• 尽量避免使用嵌套选择器、属性选择器、伪类选择器，优先使用单类名选择器，降低被内核过滤的概率
• 不要将适配规则写在除宽高检测之外的媒体查询中，华为邮件对大部分媒体查询规则的支持度极低

内容的提问来源于stack exchange，提问作者Pavlina