javascript - 如何通过 JavaScript 或 CSS 检查用户是否处于高对比度模式

Question

当按Shift+ Left+ Alt+ PrintWindows 切换到高对比度模式时 - 是否有机会在网页上检测到它（使用 JavaScript 或 CSS）？

有没有机会在HTTP-Request（又名服务器端，例如通过 PHP 或 Ruby）中检测到这一点？

Answer 1

根据这篇关于在高对比度中使用 CSS sprites 的文章，在 Windows 上的高对比度模式下，背景图像应设置为“无”，并且还会更改背景颜色。这应该覆盖任何 CSS 样式表。因此，您可以在初始渲染后执行一些 javascript 来检测它。检查他的演示页面（“仅供参考 [Not] in high contrast mode”文本）。

我有 Mac（FYI switch using Cmd + Alt + Ctrl + 8），他的技术对我不起作用，但他说它适用于 Windows。

如果可行，您可以使用一些 JavaScript 来简单地更改 CSS 或设置（会话）cookie 并重新加载页面以将其传递给服务器并执行服务器端操作。

Answer 2

以下适用于带有（桌面）IE的Win8：

<style type="text/css">
// ...
@media screen and (-ms-high-contrast: active) {
   /* any rules may come here, for example: */
   .leftMenu a:hover { text-decoration: underline; }
}
// ...
</style>

我认为它也必须与 Windows Store Apps 一起使用。这不是一个完整的解决方案，但可能有点用处。

MSDN 文档： @ media， -ms-high-contrast。高对比度模式的描述也值得一提。

Answer 3

如果您在 Web 应用程序中实现高对比度，请使用以下代码块来检测黑白和黑白对比度选择。这将在 IE 中正常工作。

@media screen and (-ms-high-contrast: black-on-white) { /* 把你的样式代码...... */ }

@media screen and (-ms-high-contrast: white-on-black) { /* 把你的样式代码...... */ }