# 浏览器支持

> React 颜色选择器的浏览器与移动端支持：最低版本、触摸交互、底部面板、取色器和图片取样。

Source: https://chroma-panel.jscrate.dev/zh/react/handbook/browser-support
Last updated: 2026-09-21

这个 React 颜色选择器的样式表用到了 `light-dark()`，因此需要 2024 年及以后发布的浏览器。下表列出了最低版本，后文依次介绍图片取样、取色器、触摸输入和移动端的底部面板。

|               | 最低版本 |
| ------------- | -------- |
| Chrome / Edge | 123      |
| Firefox       | 120      |
| Safari        | 17.5     |

低于这些版本时 CSS 不会生效，面板会以无样式的状态渲染。面板还用到了 `:has()`、`@layer`、`color-mix()` 和 `svh`，它们都比 `light-dark()` 更早得到支持，所以最低版本由 `light-dark()` 决定。面板能跟随系统配色方案，靠的也是 `light-dark()`，详见[主题](https://chroma-panel.jscrate.dev/zh/react/handbook/theming)。

## 取色器

取色器使用浏览器的 `EyeDropper` API，目前只有 Chromium 系浏览器支持。`showEyedropper` 默认为 `true`，但按钮只会在支持该 API 的浏览器中渲染，所以在其他浏览器里也不会出问题。

如果你要自己实现取色按钮，先检查 `useEyedropper().supported`，详见 [useEyedropper](https://chroma-panel.jscrate.dev/zh/react/utils/use-eyedropper)。

## 图片取样

图片取样需要 `createImageBitmap` 和 `OffscreenCanvas`。满足上表版本要求的浏览器都支持这两者。它们具体用来做什么，请看[图片模式](https://chroma-panel.jscrate.dev/zh/react/modes/image)。

## 在手机上

屏幕宽度小于 640px 时，弹出层会变成底部面板：全宽、顶部圆角、带拖动条，背后有一层遮罩并锁定页面滚动。控件在鼠标操作时保持紧凑，触摸操作时点击区域会增大到 44px。如果你用 [Popover](https://chroma-panel.jscrate.dev/zh/react/components/popover) 自己实现触发器，可以传入 `sheetOnMobile={false}`，让它在任何宽度下都以锚定的弹出层显示。

有一行代码是库没法替你加上的：

```html
<meta
  name="viewport"
  content="width=device-width, initial-scale=1, viewport-fit=cover"
/>
```

没有 `viewport-fit=cover` 的话，在带刘海的 iPhone 上底部面板会被主屏幕指示条挡住。功能不受影响，只是面板的位置会略微偏低。