Mozilla 浏览器上的高对比度模式 [英] High contrast mode on Mozilla browser

问题描述

我无法在 Mozilla (Firefox) 浏览器中对高对比度模式使用任何媒体查询.给定的媒体查询在 IE 和 Edge 上运行良好，但在 Mozilla 上不起作用.图像没有以高对比度模式出现在 Mozilla 上.有人可以建议任何以高对比度模式定位 Mozilla 的媒体查询吗?

I am not able to use any media query for high contrast mode in the Mozilla (Firefox) browser. The media queries given are working fine on IE and edge, but not working on Mozilla. The images are not coming on Mozilla in high contrast mode. Can someone suggest any media query which will target Mozilla in high contrast mode?

我使用了以下媒体查询:

I have used following media queries:

@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) {

}

推荐答案

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

For Mozilla I use JS to detected high contrast mode or media query

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对于 mozila

CSS For mozila

@-moz-document url-prefix() {

@-moz-document url-prefix() {

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

}

这篇关于Mozilla 浏览器上的高对比度模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！