如何更改浏览器中的“preferes-reduced-motion”设置？

Question

有大量关于如何在 CSS 中使用偏好减少运动媒体查询的文档。

这很棒，但现在我prefers-reduced-motion在我的 CSS 中使用，我希望能够测试启用此设置的人使用我的网站的情况。不过，我找不到有关如何执行此操作的任何信息，而且我很难在浏览器设置中找到此设置。

也许这根本不是浏览器设置。也许这是在操作系统级别设置的。

Answer 1

根据其他答案，这是操作系统设置。

但是，为了进行测试，基于 Chromium 的浏览器允许您临时更改开发人员工具中的设置：

要模拟操作系统的简化运动设置，而无需更改操作系统设置：

1. 在 Windows/Linux 上按Ctrl+ Shift+或在 macOS 上按+ +打开命令菜单。PCommandShiftP

2. 键入reduce，以打开和关闭模拟。选择“模拟 CSS 首选减少运动”选项，然后按Enter。

3. 刷新网页并检查动画是否运行。

来源：Microsoft Edge 文档中的“模拟简化运动”（但并非特定于 Edge）。

Answer 2

这应该是一个操作系统设置，我知道在 Mac OS 中它位于：系统偏好设置 > 辅助功能 > 显示 > 减少运动。

在 Windows 10 中：设置 > 轻松访问 > 显示 > 在 Windows 中显示动画。

更多信息：

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion

另请注意并非所有浏览器都支持或尊重该设置

Answer 3

哦，我没有在 mdn 文档中看到“用户首选项”部分。？？？

对于 Firefox，在以下情况下会接受 reduce 请求：

• 在 GTK/Gnome 中，如果 gtk-enable-animations 设置为 false。这可以通过 GNOME Tweaks（外观选项卡或常规选项卡，取决于版本）进行配置。
  • 或者，添加gtk-enable-animations = false到 GTK 3 配置文件 ( ~/.config/gtk-3.0/settings.ini)的 [Settings] 块。
• 在 Windows 10 中：设置 > 轻松访问 > 显示 > 在 Windows 中显示动画。
• 在 Window 7 [& 8] 中：控制面板 > 轻松访问 > 使计算机更易于查看 > 关闭所有不必要的动画（如果可能）。
• 在 macOS 中：系统偏好设置 > 辅助功能 > 显示 > 减少运动。
• 在 iOS 中：设置 > 通用 > 辅助功能 > 减少运动。
• 在 Android 9+ 中：设置 > 辅助功能 > 删除动画。

来源： https : //developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#User_Preferences

它说“对于 Firefox”，但是由于这是操作系统级别的系统设置，这可能是您更改支持此媒体查询的所有浏览器的设置的方式。