使用 Media Query 检测设备 Reduced Motion 设置

最近在看《Smooth Scrolling and Accessibility¹ 》这篇文章时，发现在 Safari 10.1 中增加了一个好玩的访问性检测——Reduced Motion²，因此可以通过特性检测区分并对一些配置较差或主动开启「减弱动态效果」的用户进行体验优化。

开启「减弱动态效果」

「减弱动态效果」设置无论在 MacOS 还是 iOS 里都隐藏的比较深：

• MacOS：进入「系统偏好设置」-「辅助功能」-「显示器」，开启「减弱动态效果」；³
• iOS：进入「设置」-「通用」-「辅助功能」-「减弱动态效果」，开启选项。⁴

开启「减弱动态效果」可以有效地降低 MacOS/iOS 系统糟糕的晕眩效果性能开销，从而达到系统更流畅的功效。

特性检测

Reduced Motion 功能的检测关键词是 prefers-reduced-motion，使用 CSS Media Query 就可以针对开启「减弱动态效果」的用户进行页面性能优化：

@keyframes ambient {
  // Keyframes for an ambient animation that is purely decorative.
}
 
.background {
  animation: ambient 10s infinite alternate;
}
 
@media (prefers-reduced-motion) {
  // Disable the non-essential animations.
  .background {
     animation: none;
  }
}

使用 JavaScript 则是使用 matchMedia 检测，还能监听改变事件：

var motionQuery = window.matchMedia('(prefers-reduced-motion)');
if (motionQuery.matches) {
    /* reduce motion */
}
motionQuery.addListener( handleReduceMotionChanged );

用 Safari 查看下面的演示，按照上面的切换方式来观察不同。

使用场景

因为这是 MacOS/iOS 独有的设置，所以目前也只有在 Safari 里可以一用。这个功能非常适合为低配置设备的用户以及追求性能的用户做体验优化，因为很多用户会开启「减弱动态效果」来在旧设备上提升系统流畅度。

比如我的博客背景有一个大的 Canvas，很多人反映说访问时风扇狂啸，那么就可以在检测到开启「减弱动态效果」时主动关闭一些无关紧要的动画从而提升用户的体验。

如果碰巧你用的不是 MacBook，那么你应该去买一个:-P

-- EOF --

1. Smooth Scrolling and Accessibility ↩︎
2. Reduced Motion Media Query ↩︎
3. macOS Sierra: Reduce screen motion ↩︎
4. Reduce screen motion on your iPhone, iPad, or iPod touch ↩︎

Update 2019.04.25：自 Chrome 74 起，也支持该特性检测了。