2

我正在寻找一种简单的方法来检测用户的系统是否处于高对比度模式或没有在反应应用程序中使用 javascript/typescript。

某处的图书馆中是否有可用的公共方法？

这些stackoverflow帖子没有给我我正在寻找的东西，这是一种导入方法：

检测是否在 Android 辅助功能设置中启用了“高对比度”

如何在 JavaScript / CSS 中检测 MAC OS 反色模式？

如何检测用户是否启用了 Mac OS 高对比度辅助功能设置？

编辑：我打算能够区分黑白模式和黑白模式

编辑：这是我尝试过的，但没有在 Chrome 中应用

/* Targets displays using the Windows’ "High Contrast Black" theme: */
@media screen and (-ms-high-contrast: white-on-black) {
    .targetClass {
        color: white;
        background-color: black;
    }
 }

/* Targets displays using the Windows’ "High Contrast White" theme: */
@media screen and (-ms-high-contrast: black-on-white) {
    .targetClass {
        color: black;
        background-color: white;
    }
 }
4

1 回答 1

1

这是我尝试过的，但它没有在 Chrome 中应用


如何让 Chrome 响应 Windows 10 高对比度模式：

Chrome 通过其High Contrast Extension做自己的事情。此扩展不响应 Windows 10 高对比度模式！

Chrome 也不会响应ms-high-contrast媒体查询，这些查询仅适用于 IE 和 Edge Legacy。

但是，您可以检测 Chrome 的高对比度扩展是否通过 TypeScript 启用，如下所示：

const htmlTag: HTMLElement = document.getElementsByTagName('html')[0];
const isUsingChromeHighContrastExtension: boolean =
    htmlTag.getAttribute('hc') !== null;

现在你有了一个布尔值，isUsingChromeHighContrastExtension你可以使用它来根据扩展是否启用来调整你的样式。

请注意，Chrome 的高对比度扩展没有白底黑字或黑底白字设置，但它确实有多种其他选项可供一些视障人士受益。


有关的：

如何检测是否为 TypeScript 检测其他浏览器/平台中的高对比度启用了高对比度。

以火狐为目标

于 2020-09-17T21:55:35.777 回答