Cách để Chrome phản hồi với chế độ tương phản cao của Windows 10 bằng javascript / typecript trong ứng dụng React

Sep 18 2020

Tôi đang tìm một cách đơn giản để phát hiện xem hệ thống của người dùng đang ở chế độ tương phản cao hay không sử dụng javascript / typecript trong ứng dụng phản ứng.

Có một phương pháp công cộng có sẵn trong một thư viện ở đâu đó không?

Các bài đăng stackoverflow này không cung cấp cho tôi những gì tôi đang tìm kiếm, đó là một phương thức từ một lần nhập:

Phát hiện xem 'Độ tương phản cao' có được bật trong cài đặt trợ năng Android hay không

Làm thế nào để phát hiện chế độ màu đảo ngược MAC OS trong JavaScript / CSS?

Làm cách nào để phát hiện người dùng đã bật cài đặt trợ năng tương phản cao của Mac OS?

CHỈNH SỬA : Tôi dự định có thể phân biệt giữa chế độ đen trắng và trắng trên chế độ đen

CHỈNH SỬA : Đây là những gì tôi đã thử nhưng nó không được áp dụng trong 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;
    }
 }

Trả lời

1 SuperJade Sep 18 2020 at 04:55

Đây là những gì tôi đã thử nhưng nó không được áp dụng trong Chrome

Cách để Chrome phản hồi với chế độ Tương phản cao của Windows 10:

Chrome làm điều riêng của mình với Tiện ích mở rộng độ tương phản cao . Tiện ích mở rộng này không phản hồi với chế độ Tương phản cao của Windows 10!

Chrome cũng sẽ không trả lời các ms-high-contrasttruy vấn phương tiện, chỉ dành cho IE và Edge Legacy.

Tuy nhiên, bạn có thể phát hiện xem Tiện ích mở rộng tương phản cao của Chrome có được bật hay không thông qua TypeScript như sau:

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

Bây giờ bạn có một boolean, isUsingChromeHighContrastExtensionmà bạn có thể sử dụng để điều chỉnh kiểu của mình dựa trên việc tiện ích có được bật hay không.

Lưu ý rằng Tiện ích mở rộng tương phản cao của Chrome không có cài đặt đen trắng hoặc trắng đen, nhưng nó có nhiều tùy chọn khác mà một số người khiếm thị được hưởng lợi.

Có liên quan:

Cách phát hiện xem có độ tương phản cao được bật hay không để phát hiện TypeScript có độ tương phản cao trong các trình duyệt / nền tảng khác.