如何使用CSS精准定位iOS端Gmail App？

以下是几种可行的实现方法，结合客户端特征和渲染差异来精准定位iOS版Gmail App：

• UA标识+脚本辅助定位
  iOS版Gmail的User-Agent包含Gmail和iPhone/iPad关键词，可通过内联脚本给HTML根元素添加专属类名，再用CSS针对性设置样式：

  <script>
    const ua = navigator.userAgent;
    if (ua.includes('Gmail') && (ua.includes('iPhone') || ua.includes('iPad'))) {
      document.documentElement.classList.add('gmail-ios');
    }
  </script>
  

  对应的CSS代码：

  .gmail-ios .target-element {
    padding: 10px 14px;
    line-height: 1.6;
    /* 其他iOS Gmail专属样式 */
  }
  

• 利用渲染特性差异
  iOS版Gmail基于WebKit但有独立的样式规则，可通过@supports和媒体查询组合筛选：

  /* 匹配iOS设备且为Gmail客户端的样式 */
  @media (max-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
    .gmail_default .target-element {
      /* 利用Gmail默认容器类缩小范围 */
      border-radius: 8px !important;
    }
  }
  
  /* 利用iOS Gmail不支持部分WebKit属性的特性 */
  @supports (-webkit-touch-callout: none) and (not (-webkit-appearance: none)) {
    .target-element {
      font-size: 14px;
    }
  }
  

• 邮件容器类名嵌套定位
  iOS Gmail会给邮件内容外层添加gmail_default类，结合iOS设备的媒体查询，可缩小定位范围：

  @media only screen and (min-device-width: 320px) and (max-device-width: 768px) {
    .gmail_default .target-element {
      margin: 0 auto;
      width: 90%;
    }
  }
  

注意事项 #

• iOS Gmail的渲染引擎会随版本更新调整，建议在多个版本的客户端中测试样式效果；
• 优先通过选择器优先级覆盖默认样式，减少!important的使用。

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