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

Question

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

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

Answer 1

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

我有 Mac（仅供参考，使用 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 应用商店应用程序。
这不是一个完整的解决方案，但可能有点用。

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

Answer 3

使用@media（prefers-contrast：更多）< /a>：

.contrast {
  width: 100px;
  height: 100px;
  outline: 2px dashed black;
}

@media (prefers-contrast: more) {
  .contrast {
    outline: 2px solid black;
  }
}

所有主流常青浏览器均支持。

警告：-ms-high-contrast 仅适用于 Microsoft 浏览器。

Answer 4

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

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

@media 屏幕和 (-ms-high-contrast: 黑底白字) {
/*
输入您的样式代码............
*/
}