我的解决方案是使用 CSS查询来获取媒体功能@media
的最小值和最大值。根据实验,RDP 似乎每种颜色只有 5 位,而不是典型桌面的每种颜色全部 8 位。color
当然,这种解决方案并不完美,因为您会从不使用 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
变量的值。