如何使用CSS Media Query区分iOS WebView与iOS浏览器

不存在可直接精准区分iOS WebView与普通浏览器环境的原生CSS media 查询，纯靠媒体特性无法实现两类场景的样式隔离，生产环境请用类名标记的方案实现，稳定性100%。

方案1：原生端注入标识类（优先选用，零误判） #

这是最可靠的实现方式，完全不会出现浏览器端样式误生效的问题：

• 协调iOS端开发，在WebView初始化加载页面前，通过JS注入给页面根节点<html>添加专属标记类，比如is-ios-wkwebview
• 样式编写时直接通过类名做作用域隔离即可：

/* 仅iOS WebView环境生效的样式 */
.is-ios-wkwebview .your-target-component {
  /* 你需要的WebView专属样式 */
}

/* 仅普通浏览器环境生效的样式 */
:not(.is-ios-wkwebview) .your-target-component {
  /* 浏览器端专属样式，不会在WebView里触发 */
}

方案2：前端UA判断挂载类（无原生改造成本的备选） #

如果没法协调原生端修改代码，可以在页面初始化阶段通过JS识别User-Agent特征，手动给根节点挂标识类：

• iOS端WKWebView的UA和普通浏览器的核心差异是：所有iOS端独立浏览器（包括Safari、iOS版Chrome、iOS版Firefox等）的UA都会携带Safari/版本后缀，而WKWebView的默认UA没有这个字段
• 对应判断代码示例：

const isIOS = /iP(hone|od|ad)/.test(navigator.userAgent);
const isIOSWebView = isIOS && !/Safari\//.test(navigator.userAgent);
if (isIOSWebView) {
  document.documentElement.classList.add('is-ios-wkwebview');
}

注意：该方案存在极小概率误判，比如用户手动修改浏览器UA、或者部分小众内置浏览器的UA不符合常规特征时可能匹配失效，仅在无法改动原生代码时使用。

现有CSS标准定义的所有媒体查询特性，仅覆盖设备硬件属性（屏幕尺寸、像素比、横竖屏等）、系统状态（深色模式、低电量模式、减少动效偏好等），没有任何标准或webkit私有媒体特性可以标记当前渲染容器是内嵌WebView还是独立浏览器。
网上流传的部分私有前缀媒体查询写法，要么在iOS 15+版本已经失效，要么会同时匹配Safari和WebView环境，使用后反而会引发你提到的浏览器端功能异常问题，不要尝试。

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