如何仅为iOS端Safari浏览器设置专属CSS样式（排除iOS端Firefox）

我太懂这个坑了——iOS上的Firefox其实是套着WebKit内核的壳（苹果App Store的限制导致的），所以它会支持一大堆-webkit-前缀的CSS特性，这就导致你之前用的那些基于WebKit特性检测的方法，全都会被它误判成Safari。

试试这两个更精准的方案，二选一就行：

方案一：更严格的CSS特性组合检测 #

这个方案把设备特性和只有Safari独有的CSS规则结合起来，能有效排除iOS Firefox：

/* 仅对iOS Safari生效的样式 */
@media screen and (min-device-width: 320px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
  @supports (-webkit-overflow-scrolling: touch) and (color: -webkit-link) {
    .safari-only {
      height: 85vh;
    }
  }
}

为什么有效？ #

• 前半部分的媒体查询先锁定iOS设备的屏幕尺寸和像素比范围
• 后半部分的@supports同时检测两个特性：-webkit-overflow-scrolling: touch虽然部分其他浏览器也支持，但color: -webkit-link是Safari独有的颜色值用法，iOS Firefox不会识别这个规则，所以整个条件只有Safari能满足。

方案二：用JavaScript精准检测后添加类 #

如果CSS方案还是不稳，用JS做浏览器检测会更直接：

// 判断当前是否是iOS Safari
function isiOSSafari() {
  const ua = window.navigator.userAgent;
  // 匹配iOS设备，且是AppleWebKit内核，同时排除Chrome、Firefox等第三方iOS浏览器
  return /iPhone|iPad|iPod/.test(ua) && /AppleWebKit/.test(ua) && !/CriOS|FxiOS|Chrome|Firefox/.test(ua);
}

// 如果是iOS Safari，给body添加专属类
if (isiOSSafari()) {
  document.body.classList.add('ios-safari-active');
}

然后在CSS里写：

.ios-safari-active .safari-only {
  height: 85vh;
}

为什么有效？ #

iOS Firefox的用户代理字符串里会带有FxiOS标识，而纯Safari的UA里只有AppleWebKit和设备型号，通过排除这些第三方标识，就能精准定位到Safari。

你之前的那些方法失效，核心原因就是iOS第三方浏览器（比如Firefox）都基于WebKit内核，所以会支持大部分-webkit-前缀的特性，单纯靠前缀检测根本区分不开。

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