浏览器和移动设备的差异会导致前端渲染和脚本执行出现各种兼容性问题：不同操作系统及版本、浏览器内核及版本会对CSS语法解析、JavaScript API支持产生直接影响。

中国PC端主流浏览器及内核情况：

• Chrome：35.47%，使用Blink（基于WebKit的Google主导开源渲染引擎，Chrome 28起替换WebKit）
• 360安全浏览器：18.76%，基于WebKit开发的X5内核
• Edge：12.94%，2020年起基于Chromium，使用Blink内核
• Firefox：11.12%，Mozilla自研Gecko内核
• QQ浏览器：9.95%，已从X5升级至Blink
• Safari：3.92%，WebKit内核

中国移动端主流浏览器及内核情况：

• Chrome：48.57%，Blink
• Safari：21.9%，WebKit
• UC浏览器：19.35%，基于WebKit开发的U3内核（含云端架构）
• QQ浏览器：7.88%，Blink
• Samsung Internet：0.73%
• Android原生：0.53%

PC端兼容需重点覆盖WebKit/Blink、Gecko内核；移动端兼容优先保障WebKit/Blink内核。HTML5、CSS3、ES6+的新特性会被新版本浏览器逐步支持，但老旧浏览器（如IE）及迭代缓慢的浏览器会因未适配新特性引发问题。

环境检测

检测客户端操作系统

通过解析navigator.userAgent字符串匹配操作系统标识：

/** 获取当前运行的客户端操作系统 */
export const detectOperatingSystem = () => {
  const ua = navigator.userAgent;
  let osType = 'Other';

  if (ua.includes('Win')) {
    osType = 'Windows';
  } else if (ua.includes('Mac') && !ua.includes('iPhone') && !ua.includes('iPad')) {
    osType = 'macOS';
  } else if (ua.includes('Linux') || ua.includes('X11')) {
    osType = 'Linux';
  } else if (/Android/.test(ua)) {
    osType = 'Android';
  } else if (/iPhone|iPad|iPod/.test(ua)) {
    osType = 'iOS';
  }

  return osType;
};

检测浏览器基本信息

同样通过navigator.userAgent解析获取浏览器名称、渲染引擎、版本号，如需更全面的检测可使用成熟库如UAParser.js：

/** 获取当前浏览器的基本信息 */
export const detectBrowserSpecs = () => {
  const ua = navigator.userAgent;
  let name = 'Unknown';
  let engine = 'Unknown';
  let version = 'Unknown';

  // 检测IE（包括Trident内核版本）
  if (ua.includes('MSIE') || ua.includes('Trident')) {
    name = 'Internet Explorer';
    engine = 'Trident';
    const verMatch = ua.match(/((MS)?IE\s|(\s?rv:))[0-9\.]+/);
    version = verMatch ? verMatch[0].replace(/[^\d.]/g, '') : 'Unknown';
  // 检测Firefox
  } else if (ua.includes('Firefox')) {
    name = 'Firefox';
    engine = 'Gecko';
    const verMatch = ua.match(/Firefox\/([0-9\.]+)/);
    version = verMatch ? verMatch[1] : 'Unknown';
  // 检测Chrome（排除Opera等基于Chromium但带独有标识的）
  } else if (ua.includes('Chrome') && !ua.includes('OPR') && !ua.includes('Edg')) {
    name = 'Chrome';
    engine = 'Blink';
    const verMatch = ua.match(/Chrome\/([0-9\.]+)/);
    version = verMatch ? verMatch[1] : 'Unknown';
  // 检测Safari
  } else if (ua.includes('Safari') && !ua.includes('Chrome') && !ua.includes('Edg')) {
    name = 'Safari';
    engine = 'WebKit';
    const verMatch = ua.match(/Version\/([0-9\.]+)/);
    version = verMatch ? verMatch[1] : 'Unknown';
  // 检测Opera
  } else if (ua.includes('Opera') || ua.includes('OPR')) {
    name = 'Opera';
    engine = ua.includes('Opera\/1[0-4]') ? 'Presto' : 'Blink';
    const verMatch = ua.match(/(Opera\/|Version\/|OPR\/)([0-9\.]+)/);
    version = verMatch ? verMatch[2] : 'Unknown';
  // 检测新版Edge
  } else if (ua.includes('Edg')) {
    name = 'Edge';
    engine = 'Blink';
    const verMatch = ua.match(/Edg\/([0-9\.]+)/);
    version = verMatch ? verMatch[1] : 'Unknown';
  }

  return { name, engine, version };
};

开发阶段兼容方案

特性预查

使用Can I Use平台查询目标CSS属性、JavaScript API的浏览器支持范围，提前规避兼容性风险。

自动CSS前缀处理

使用Autoperfixer配合PostCSS，根据配置的目标浏览器自动添加WebKit/Blink、Gecko等内核前缀。webpack项目配置步骤如下：

1. 安装依赖：

npm install postcss-loader autoprefixer --save-dev

2. 项目根目录创建postcss.config.js：

module.exports = {
  plugins: [
    require('autoprefixer')({ overrideBrowserslist: ['> 0.25%', 'not dead'] })
  ]
};

3. 修改webpack.config.js的CSS处理规则：

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader', 'postcss-loader']
      }
    ]
  }
};

ES6+语法转译与Polyfill

使用Babel将ES6+、ESNext语法转换为ES5，结合core-js提供全局Polyfill，覆盖旧浏览器缺失的API。配置示例（babel.config.json）：

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "chrome": "60",
          "firefox": "55",
          "safari": "12",
          "ie": "11"
        },
        "useBuiltIns": "usage",
        "corejs": "3.38"
      }
    ]
  ]
}

常见兼容问题与解决

iOS端日期解析异常

部分iOS设备不支持YYYY-MM-DD HH:mm:ss格式的日期字符串，使用Date构造函数会返回NaN。解决方案是替换连字符为斜杠，或使用成熟的日期处理库如date-fns：

// 原生解决方案
const parseIOSFriendlyDate = (dateStr) => {
  const formattedStr = dateStr.replace(/-/g, '/');
  return new Date(formattedStr);
};

// date-fns解决方案
import { parseISO, format } from 'date-fns';
const parsed = parseISO('2024-05-20T14:30:00');
const formatted = format(parsed, 'yyyy-MM-dd HH:mm:ss');

iOS端音频自动播放限制

Safari及iOS微信内置浏览器禁止音频自动播放，需依赖用户交互事件或微信桥接触发：

const triggerAudioPlayback = (audioId) => {
  const audioEl = document.getElementById(audioId);
  if (!audioEl) return;

  const tryPlay = () => {
    audioEl.play().catch(err => console.log('Playback blocked:', err));
  };

  // 微信桥接触发
  document.addEventListener('WeixinJSBridgeReady', tryPlay, { once: true });
  // 易信桥接触发
  document.addEventListener('YixinJSBridgeReady', tryPlay, { once: true });
  // 用户首次触摸触发
  document.body.addEventListener('touchstart', tryPlay, { once: true });
};

CSS变量兼容

IE11及以下不支持CSS变量，可使用PostCSS插件postcsss-custom-properteis预编译为静态值，或使用Sass/Less变量作为替代方案。

Grid布局兼容

老旧版本浏览器（如IE10-11）支持旧版Grid语法，可使用Autoprefixer自动转换，或在必要时降级为Flex布局、浮动布局。