引言
「这个网站支持哪些浏览器？」「手机上体验怎么样？」——这是每个前端项目迟早要回答的两个问题。本文把本站（一个基于 Astro 5 + Tailwind CSS + Svelte 5 的静态博客）目前的支持情况整理成一份公开报告，既是对访客的说明，也是我自己做兼容决策时的依据。
一、浏览器支持矩阵
本站对「完整支持」的定义是：布局、配色、交互、动画全部正常工作。以此为标准的支持矩阵如下：
| 平台 | 最低版本 | 说明 |
|---|---|---|
| Chrome / Edge（桌面 + Android） | 111+ | 完整支持 |
| Firefox | 113+ | 完整支持 |
| Safari（macOS + iOS） | 15.4+ | 完整支持 |
| 其他 Chromium 内核（Opera、Arc、微信/QQ 内置浏览器等） | 内核 ≥111 | 完整支持 |
| 更旧的浏览器（2019–2021） | — | 页面结构完整可用，主题色回退为静态配色 |
| IE 11 及更早 | — | 不支持 |
也就是说，2022 年之后发布的 evergreen 浏览器都在完整支持范围内，覆盖了绝大多数真实用户。
二、支持下限是怎么确定的
这个下限不是拍脑袋定的，而是由构建配置和 CSS 特性共同决定的：
JS 层：构建时显式声明了 build.target = ["chrome111", "edge111", "firefox113", "safari15.4", "ios15.4"]，输出的语法（ES2020 级）在更老的浏览器上也能解析，真正卡住下限的是 CSS。
CSS 层：本站主题色全部使用 oklch() 色彩空间（配合一个可调节的色相变量 --hue 实现主题换色），而 oklch() 从 Chrome 111 / Firefox 113 / Safari 15.4 才开始支持。为此我们做了一层防御：
@supports not (color: oklch(0.56 0.14 250)) { :root { --primary: #5a55c9; /* 静态回退配色 */ }}不支持 oklch() 的浏览器会整体落到这套静态回退配色上，页面依然完整可读，只是失去了动态换色的能力——这正是渐进增强的思路。
其余新特性也都遵循「必须可用、装饰性可降级」的原则：
| 特性 | 用途 | 降级策略 |
|---|---|---|
:has() | 隐藏代码块末尾空行号 | 纯装饰，失效无影响 |
field-sizing: content | 聊天输入框自动增高 | 有 JS 手动计算高度的降级 |
mask-image | 目录渐隐遮罩 | 同时提供 -webkit- 前缀版本 |
dvh 单位 | 移动端地址栏伸缩适配 | 先写 100vh 再写 100dvh，旧浏览器用前者 |
三、多端适配策略
站点使用 Tailwind 的四档断点（sm: 640 / md: 768 / lg: 1024 / 2xl: 1536），针对不同设备做了差异化布局：
| 设备 | 适配要点 |
|---|---|
| PC（≥1024px） | 三栏布局：左侧个人资料/分类/标签，中间正文，右侧文章目录（≥1536px 时侧栏常驻；1280–1535 之间改为可折叠抽屉，不再「消失」） |
| 平板（768–1023px） | 侧栏堆叠为单列、卡片改为两列网格、封面图自适应；顶部导航在 lg 以下收进汉堡菜单 |
| 移动端（<768px） | 汉堡菜单 + 滑出面板；文章顶部提供折叠式目录抽屉；回到顶部按钮全端可用；底部悬浮按钮避开 iPhone 底部安全区（env(safe-area-inset-*)） |
移动端还有几个容易被忽略的细节：欢迎通知的宽度使用 min(400px, calc(100vw - 2rem)) 防止小屏溢出；viewport 显式声明 initial-scale=1, viewport-fit=cover；触屏交互均保留 active 态反馈。
四、性能特征
- 纯静态输出（SSG）：111 个页面构建期生成，无服务端运行时
- 首屏 JS 约 110KB（gzip 约 45KB）：Mermaid 图表渲染器（约 587KB）、PhotoSwipe 灯箱、全文搜索索引全部按需加载——只有页面真的包含图表、用户真的点击图片或开始搜索时才下载
- 图片：本地图片全部经构建期压缩为 webp/avif 多尺寸 srcset，横幅提供 480–1920 八档；封面图按卡片实际尺寸生成
- 字体：自托管且只打包 latin 子集，配合
unicode-range浏览器按需下载；中文字体交给系统字体栈（Windows 微软雅黑 / macOS 苹方） - 离线能力（PWA）：Service Worker 对静态资源做缓存优先、HTML 做网络优先，弱网和离线状态下已读内容仍可浏览
五、可访问性与体验细节
- 动效克制：所有入场动画、波浪、跑马灯都在
prefers-reduced-motion: reduce下自动停用 - 暗色模式：跟随系统（
prefers-color-scheme）或手动切换，首帧前注入避免闪烁 - 语义化与焦点：导航、按钮均有 aria-label；键盘可完整操作；焦点态可见
- 页面过渡：Swup 提供淡入淡出过渡并同步焦点管理，且对 JS 禁用环境有完整静态回退
六、自动化验证
支持情况不是靠「我试了试」维持的，而是固化成脚本和 CI：
astro check：全量 TypeScript 类型检查，0 错误才合入- 45 项响应式断言：Playwright 在 320 / 360 / 390 / 768 / 1024 / 1280 / 1440 / 1536 / 1920 九个宽度下遍历首页、文章页、技术页、工具页，断言无横向溢出、无运行时错误
- 28 项运行时验证：懒加载是否生效、搜索全链路、字体子集、PWA 注册、SEO meta 等，逐项断言
- CI 在 PR 时自动构建（含搜索索引）并跑响应式冒烟测试
如果你在某个设备或浏览器上发现了异常，欢迎随时告诉我——这份矩阵会随着反馈持续修正。