29.2 系统体验适配：深色模式、DPI 缩放、高分辨率适配

Tauri 应用要适应现代操作系统的显示习惯，需要处理好三件事：深色模式、DPI 缩放和高分辨率渲染。好在 Tauri 底层基于系统原生 WebView，大部分工作可以交给 WebView 自动完成，但仍有几个关键点需要开发者手动配置。

深色模式

深色模式不仅仅是反色主题，它意味着应用需要跟随系统设置，在明暗之间无缝切换。Tauri 可以从两方面支持：

1. WebView 中获取系统主题
在 <body> 标签上，系统会根据偏好自动设置 data-theme 或通过 CSS 媒体查询反馈当前颜色方案。你需要做的，就是准备两个样式集合。

/* 通过媒体查询适配 */
@media (prefers-color-scheme: dark) {
  body {
    background: #1e1e1e;
    color: #eee;
  }
}

2. Rust 侧监听并在运行时切换
Tauri 的窗口 API 允许你主动监听操作系统的外观变化，并将其传递给前端。

// 在 setup 或窗口创建后，监听主题变化
window.on_window_event(|event| {
    if let tauri::WindowEvent::ThemeChanged(theme) = event {
        // 发送给前端，例如触发自定义事件
        window.emit("theme-changed", theme.to_string());
    }
});

前端收到事件后，可以动态替换类名或重置 CSS 变量。这种做法比纯 CSS 媒体查询更可控，适合需要立即刷新非 CSS 样式（如 Canvas 绘图颜色）的场景。

3. 界面元素的完全控制
除了页面背景，别忘记状态栏、对话框、菜单的深色适配。Tauri 的 window.set_title() 不会改变标题栏颜色，可能需要利用原生窗口修饰（decorations: false）自定义标题栏。如果保持系统装饰，标题栏会根据用户系统浅色/深色设置自动显示，但窗口底色（WebView 内容）需要由你保证和标题栏视觉一致。

DPI 缩放

高 DPI 显示器（如 4K、笔记本的 200% 缩放）下，如果处理不当，界面会变得模糊或元素错位。Tauri 默认将 WebView 缩放交由系统管理，但有几个配置必须熟悉。

1. 在 tauri.conf.json 中声明 DPI 感知
Windows 下，应用启动时必须向系统声明“我能自己处理高 DPI”，否则系统会强制缩放整个窗口，导致界面模糊。Tauri 内部已经内置了 Per-Monitor DPI 感知，但确保配置正确：

{
  "tauri": {
    "windows": [
      {
        "label": "main",
        "fullscreen": false,
        "resizable": true,
        "width": 800,
        "height": 600,
        "minWidth": 400,
        "minHeight": 300
      }
    ]
  }
}

width/height 是按照逻辑像素（CSS 像素）定义的，Tauri 会将其转换为物理像素。默认情况下，use_dpi_override 未启用，窗口的物理尺寸与系统缩放因子对应。

2. 前端适配：使用相对单位
所有 CSS 尺寸尽量使用 rem、em、%、vh/vw，避免写死 px。图片和图标使用 SVG 或提供 @2x、@3x 版本。如果使用 Canvas 绘图，需要根据 window.devicePixelRatio 缩放坐标：

const ctx = canvas.getContext('2d');
const ratio = window.devicePixelRatio || 1;
canvas.width = canvas.offsetWidth * ratio;
canvas.height = canvas.offsetHeight * ratio;
ctx.scale(ratio, ratio);

3. 处理拖放时的坐标
Tauri 的拖放 API 返回的坐标是逻辑像素。如果你手动计算物理像素，需将坐标乘以 scale_factor（可通过 window.scaleFactor() 获取）。但通常直接使用即可，无需额外转换。

高分辨率适配

高分辨率屏幕（如 Retina、4K）意味着更大的渲染密度，对文字清晰度和图像锐利度要求更高。Tauri 和 WebView 默认启用高分图层面板，所以文字和矢量图形天然清晰。下面几点值得留意：

禁用文字抗锯齿的误操作

永远不要使用 -webkit-font-smoothing: none，这会让字体在高分屏上变得极其粗糙。使用 antialiased 或系统默认即可。

视频和位图的清晰度

视频播放器应当使用合适的分辨率，并利用 WebView 的硬解能力。位图请使用 image-rendering: auto 或 crisp-edges 按需调整。

与 Rust 原生组件的混合

如果你嵌入非 Web 控件（如通过 Tauri 的 tauri-plugin-window 打开的子窗口），这些控件是由系统绘制的，自动适配 DPI。只需确保 Rust 侧给出的是逻辑坐标，而非物理像素。

总结
做到这三点的核心思路很简单：深色模式优先使用 CSS 媒体查询，由 Rust 辅助动态控制；DPI 缩放放心交给 Tauri，CSS 布局用相对单位；高分辨率适配关注 Canvas 和设备像素比。这三者叠加后，你的 Tauri 应用就能在现代各种显示器上展现出干净、清晰、舒适的原生感。