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

Question

有大量关于如何在 CSS 中使用 prefers-reduced-motion 媒体查询的文档。

这很棒，但现在我在 CSS 中使用

prefers-reduced-motion

，我希望能够测试启用此设置的人使用我的网站的感觉。不过，我找不到任何有关如何执行此操作的信息，并且我很难在浏览器设置中找到此设置。

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

Answer 1

哦，我在mdn文档中没有看到“User Preferences”部分。 🤦🏻u200d♂️

对于 Firefox，如果满足以下条件，则减少请求会得到满足：

• 在 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”，但是由于这是操作系统级别的系统设置，因此这可能是您更改支持此媒体查询的所有浏览器的设置的方式。

Answer 2

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

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

更多信息：

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

另请注意，并非所有浏览器都支持或遵循该设置

Answer 3

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

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

模拟操作系统的减少运动设置，无需 必须更改您的操作系统设置：

1. 在 Windows/Linux 上按

   Ctrl

   +

   Shift

   +

   P

   或在 macOS 上按

   Command

   +

   Shift

   +

   P

   打开命令菜单。

2. 输入reduced，打开和关闭模拟。选择 Emulate CSS Preferred-reduced-motion 选项，然后按

   Enter

   。

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

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

Answer 4

太棒了！激活 Windows 动画就可以了！