My solution is to use CSS @media queries for minimum and maximum values of the color media feature. Based on experiment, RDP only seems to have 5 bits per color, rather than the full 8 bits per color of your typical desktop.
This solution is, of course, not perfect, because you'll get lots of false positives from people who aren't on RDP, but just happen to have low color-depth displays. However:
- If you are in a relatively controlled environment like a corporate intranet, you might feel more confident that "low color depth" = "RDP".
- Many of the visual elements that need adjusting for RDP on a web-page, need adjusting precisely because of the low color depth (gradients, fade outs, animation, etc.), and so it actually makes sense to test for color depth rather than RDP per se.
Here is an example that works for me in recent version of Firefox and Chrome. See the screenshot below.
<!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>
Yet another approach along these lines is to use javascript to examine the value of the screen.colorDepth variable.
