如何实现同一域名下基于操作系统/浏览器切换网站优化版本？

完全可以实现这类根据操作系统、浏览器环境切换布局、外观及性能表现的需求，下面是具体的落地思路和代码示例：

一、环境检测逻辑 #

1. 操作系统识别 #

可以通过navigator对象的属性判断系统，针对Windows 11这类特定版本，建议结合navigator.userAgentData（Chrome 90+支持）做精准判断，旧浏览器 fallback 到navigator.userAgent：

function detectOS() {
  if (navigator.userAgentData) {
    const platform = navigator.userAgentData.platform;
    const osVersion = navigator.userAgentData.uaFullVersion;
    // Win11内核版本通常从22000开始
    if (platform === 'Windows' && osVersion.startsWith('10.0.22')) {
      return 'win11';
    } else if (platform === 'Windows' && osVersion.startsWith('10.0.19')) {
      return 'win10';
    } else if (platform === 'Windows' && osVersion.startsWith('6.')) {
      return 'win7-win8';
    }
  }
  // 旧浏览器兼容逻辑
  const ua = navigator.userAgent;
  if (/Windows NT 10.0; Win64; x64/.test(ua) && /Edg\/(9[0-9]|1[0-9]{2})/.test(ua)) {
    return 'win11';
  } else if (/Windows NT 6.1/.test(ua)) {
    return 'win7-win8';
  }
  return 'other';
}

2. 浏览器与特性检测 #

除了识别浏览器版本，更可靠的方式是特性检测——直接判断当前环境是否支持现代Web特性，避免依赖User Agent的局限性：

function supportsModernFeatures() {
  return (
    CSS.supports('container-type: inline-size') && // CSS容器查询
    typeof WebGL2RenderingContext !== 'undefined' && // WebGL 2.0
    typeof IntersectionObserver !== 'undefined' // 懒加载API
  );
}

二、布局与外观切换 #

1. 动态注入CSS类 #

检测到环境后，给根元素<html>添加对应的类名，后续通过CSS类选择器实现不同样式：

const os = detectOS();
const isModern = supportsModernFeatures();

const htmlEl = document.documentElement;
if (os === 'win11' && isModern) {
  htmlEl.classList.add('modern');
} else {
  htmlEl.classList.add('legacy');
}

对应的CSS示例：

/* 基础样式（所有环境通用） */
.site-header {
  padding: 1rem;
  border-bottom: 1px solid #eee;
}

/* 现代版样式 */
.modern .site-header {
  padding: 1.5rem;
  border-radius: 12px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

/* 基础版样式 */
.legacy .site-header {
  padding: 0.8rem;
  background: #fff;
  box-shadow: none;
}

2. 条件加载资源 #

针对现代环境加载完整功能的JS/CSS，旧环境加载精简版，减少不必要的性能开销：

function loadEnvironmentResources() {
  const linkEl = document.createElement('link');
  linkEl.rel = 'stylesheet';
  linkEl.href = document.documentElement.classList.contains('modern') 
    ? '/styles/modern.bundle.css' 
    : '/styles/legacy.bundle.css';
  document.head.appendChild(linkEl);

  const scriptEl = document.createElement('script');
  scriptEl.src = document.documentElement.classList.contains('modern') 
    ? '/scripts/modern.bundle.js' 
    : '/scripts/legacy.bundle.js';
  document.body.appendChild(scriptEl);
}

// 页面加载时执行
window.addEventListener('DOMContentLoaded', loadEnvironmentResources);

三、性能适配策略 #

• 现代环境：启用高级性能优化，比如Service Worker离线缓存、图片WebP格式自动切换、CSS动画硬件加速；
• 旧环境：禁用非必要动画（替换成静态样式）、简化DOM结构（移除装饰性元素）、使用兼容性更好的布局方案（比如Flexbox替代Grid）、关闭Service Worker等可能引发兼容问题的功能。

四、手动切换兜底方案 #

自动检测可能存在误差，建议在页面显眼位置添加手动切换按钮，让用户自主选择版本：

<div class="version-toggle">
  <button id="toggleVersion">切换到基础版</button>
</div>

const toggleBtn = document.getElementById('toggleVersion');
toggleBtn.addEventListener('click', () => {
  const htmlEl = document.documentElement;
  const isModern = htmlEl.classList.contains('modern');
  // 切换类名并刷新页面
  htmlEl.classList.toggle('modern', !isModern);
  htmlEl.classList.toggle('legacy', isModern);
  // 用localStorage记住用户选择
  localStorage.setItem('preferredVersion', isModern ? 'legacy' : 'modern');
  window.location.reload();
});

// 页面加载时读取用户保存的偏好
window.addEventListener('DOMContentLoaded', () => {
  const savedVersion = localStorage.getItem('preferredVersion');
  if (savedVersion) {
    document.documentElement.classList.add(savedVersion);
  }
});

关键注意事项 #

1. 优先特性检测：User Agent容易被篡改或隐藏，特性检测是判断环境兼容性的更可靠方式；
2. 渐进增强原则：基础版必须保证核心功能完整可用，现代版在基础上添加增强体验，不能让旧环境用户丢失功能；
3. 多环境测试：一定要在目标旧系统（如Win7）和旧浏览器（如IE11、Chrome 80）上验证基础版的兼容性。

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