Мое решение состоит в том, чтобы использовать CSS @media запросы для минимальных и максимальных значений color медиа-функции . Исходя из эксперимента, кажется, что RDP имеет только 5 бит на цвет, а не полные 8 бит на цвет вашего типичного рабочего стола.
Это решение, конечно, не идеально, потому что вы получите много ложных срабатываний от людей, которые не используют RDP, но у которых просто отображаются дисплеи с низкой глубиной цвета. Тем не менее:
- Если вы находитесь в относительно контролируемой среде, такой как корпоративная интрасеть, вы можете быть более уверены в том, что «низкая глубина цвета» = «RDP».
- Многие из визуальных элементов, которые нуждаются в настройке RDP на веб-странице, нуждаются в корректировке именно потому, что из-за низкой глубины цвета (градиенты, затухание, анимация и т. Д.), И так оно и есть на самом деле имеет смысл проверить глубину цвета, а не RDP как таковую .
Вот пример, который работает для меня в последних версиях Firefox и Chrome. Смотрите скриншот ниже.
<!DOCTYPE html>
<html>
<head>
<title>Test RDP detection</title>
<style type="text/css">
@media all { li.color { display: none; } }
@media all and (min-color: 1) { li.color.color-depth-1 { display: block; } }
@media all and (min-color: 2) { li.color.color-depth-2 { display: block; } }
@media all and (min-color: 3) { li.color.color-depth-3 { display: block; } }
@media all and (min-color: 4) { li.color.color-depth-4 { display: block; } }
@media all and (min-color: 5) { li.color.color-depth-5 { display: block; } }
@media all and (min-color: 6) { li.color.color-depth-6 { display: block; } }
@media all and (min-color: 7) { li.color.color-depth-7 { display: block; } }
@media all and (min-color: 8) { li.color.color-depth-8 { display: block; } }
/* 5 bits per color seems to be the max for RDP */
@media all and (max-color: 5) {
.not-rdp { display: none; }
}
@media all and (min-color: 6) {
.rdp-only { display: none; }
}
</style>
</head>
<body>
<p>This page uses CSS <tt>@media</tt> queries to detect whether you
are viewing it over RDP—heuristically, by looking at the
color depth of your display.</p>
<ul>
<li class="color color-depth-1">Your display is not monochrome!</li>
<li class="color color-depth-2">Your display has at least 2 bits per color.</li>
<li class="color color-depth-3">Your display has at least 3 bits per color.</li>
<li class="color color-depth-4">Your display has at least 4 bits per color.</li>
<li class="color color-depth-5">Your display has at least 5 bits per color.</li>
<li class="color color-depth-6">Your display has at least 6 bits per color.</li>
<li class="color color-depth-7">Your display has at least 7 bits per color.</li>
<li class="color color-depth-8">Your display has at least 8 bits per color.</li>
</ul>
<p>You are <span class="not-rdp">not</span> using RDP.</p>
<p class="rdp-only">This is only visible over RDP.</p>
</body>
</html>
Еще один подход в этом направлении заключается в использовании javascript для проверки значения переменной screen.colorDepth.