javascript - Chrome 正在破坏我在触摸屏上的网络应用程序设计

Question

我是一名 HCI 学生，正在使用 HMTL/CSS/JS 开发一个简单的按钮应用程序。我对 Ux/UI/IA/IxD 比较熟悉，所以在代码方面我是个小鸟。

背景:我的 web 应用程序元素是一个模拟乐器，供瘫痪或截瘫等手残人士演奏现场音乐。完成后，任何可以访问互联网的人都可以免费在线使用。我已经启动并运行了原型(prototype) 2，正在等待 IRB/ORP 批准与用户进行测试。我一直在利用这段时间寻找志愿音乐家来贡献音频并测试其他可访问性问题，如色盲测试和图像对比测试。

与此同时，Chrome 正在变得邪恶。我在我的大学里没有找到任何人可以解释为什么会这样。我希望可能有一个 HTML/CSS 解决方案来解决这个问题。

问题:当在 Chrome 中的触摸屏设备上按下按钮时，会出现由 onClick/按钮按下触发的确认屏幕闪烁/背景突出显示(颜色变化)。 Chrome 不会在带有触摸板或鼠标的 PC/笔记本电脑上执行此操作；它只是触摸屏。对于触摸屏，Firefox 根本不会这样做。我还没能用 Mac/iPad/Safari 测试它。 (无关但有趣:Firefox 也不会破坏 Android 上的 Chrome 肯定喜欢搞砸的 CSS 居中。Yayyy Firefox。)

有什么方法可以阻止 Chrome 在按下触摸屏按钮时显示恼人的闪光/背景颜色变化/突出显示？

我不希望这个网络应用程序伤害任何有癫痫发作风险的人。

Music Wheel 2.0

Answer 1

请尝试以下 css:

@media (max-width: 600px){
   #canvas, #animation_container {
    width: 100% !important;
    height: auto !important;
   }
}