私の解決策は、メディア機能@media
の最小値と最大値にCSSクエリを使用することです。実験に基づくと、RDPは、通常のデスクトップの1色あたり8ビットではなく、1色あたり5ビットしかないようです。color
もちろん、このソリューションは完璧ではありません。RDPを使用していない人から多くの誤検知が発生するためですが、色深度の表示が低いだけです。でも:
- 企業のイントラネットのように比較的制御された環境にいる場合は、「低色深度」=「RDP」の方が自信があるかもしれません。
- Webページで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
変数の値を調べることです。