Question

我无法在Mozilla浏览器中将任何媒体查询用于高对比度模式，给定的媒体查询在IE和Edge上都可以正常工作，但在mozilla上不起作用，图像在高对比度模式下无法在Mozilla上显示。有人可以建议任何以高对比度模式将Mozilla定位为媒体查询的媒体查询。

我使用了以下媒体查询：

@media screen and (-ms-high-contrast: active) {

}
@media screen and (-ms-high-contrast: black-on-white) {

}
@media screen and (-ms-high-contrast: white-on-black) {

}

Answer 1

对于Mozilla，我使用JS检测高对比度模式或媒体查询

function HCTest(idval) {
    var objDiv, objImage, strColor, strWidth, strReady;
    var strImageID = idval; // ID of image on the page

    // Create a test div
    objDiv = document.createElement('div');

    //Set its color style to something unusual
    objDiv.style.color = 'rgb(31, 41, 59)';

    // Attach to body so we can inspect it
    document.body.appendChild(objDiv);

    // Read computed color value
    strColor = document.defaultView ? document.defaultView.getComputedStyle(objDiv, null).color : objDiv.currentStyle.color;
    strColor = strColor.replace(/ /g, '');

    // Delete the test DIV
    document.body.removeChild(objDiv);

    // Check if we get the color back that we set. If not, we're in 
    // high contrast mode. 
    if (strColor !== 'rgb(31,41,59)') {
        return true;
    } else {
        return false;
    }
}
jQuery(function () {
    var HCM = HCTest();
    if (HCM === true) {
        jQuery('Body').addClass("moz-contrast");
    } else {
        jQuery('Body').removeClass('moz-contrast');
    }
});

CSS 对于莫齐拉

@-moz-document url-prefix（）{

.moz-contrast{
   /**styling**/
}

}

Answer 2

有人可以建议以高对比度模式定位Mozilla的任何媒体查询吗？

没有针对高对比度模式和Firefox的媒体查询。在我的React / TypeScript项目中...

我使用TypeScript测试高对比度模式并添加了样式：

测试了用户是否在Firefox，Internet Explorer或Edge上启用了Windows 10高对比度。下面的代码创建一个div，为其提供颜色，将其添加到DOM，并确定在删除颜色之前是否保留其颜色。如果颜色已更改，则您处于高对比度模式！这适用于Firefox，IE和Edge。它不适用于Chrome。
```
highContrastMode: () => {
  const testDiv = document.createElement('div');
  testDiv.style.color = 'rgb(200, 100, 50)';
  document.body.appendChild(testDiv);
  const color = document.defaultView!.getComputedStyle(testDiv, null).color;
  document.body.removeChild(testDiv);
  return color !== 'rgb(200, 100, 50)' ? true : false;
}
```

如果您要专门针对Firefox而没有专门针对IE或Edge，请添加用户代理测试：

const isFirefox: boolean = window.navigator.userAgent.indexOf('Firefox') > -1;

当测试返回true时，将样式添加到我的组件中。

优势：

适用于Windows 10高对比度用户，包括Firefox +高对比度模式。
不更改Chrome（提供自己的扩展程序）或非高对比度用户的样式。

缺点：

我的测试所基于的假设将来可能会证明是错误的。
不适用于Chrome。（这也可能是一个优势。）

Mozilla浏览器上的高对比度模式

2 个答案:

我使用TypeScript测试高对比度模式并添加了样式：

优势：

缺点：