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

问题描述 投票:0回答:4

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

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

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

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

browser media-queries accessibility settings
4个回答
49
投票

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


14
投票

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

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

更多信息:

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

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


9
投票

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

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

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

  1. 在 Windows/Linux 上按

    Ctrl
    +
    Shift
    +
    P
    或在 macOS 上按
    Command
    +
    Shift
    +
    P
    打开命令菜单

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

    Enter

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

来源:Microsoft Edge 文档“模拟简化运动”(但不特定于 Edge)。


0
投票

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

© www.soinside.com 2019 - 2024. All rights reserved.