css - 出于 CSS 目的将电视检测为客户端浏览器的所有可能方法

Question

我有一个遵循响应式网页设计技术的网络应用程序。我想为 TV 提供不同(更大)的字体大小，为 screen 提供不同(更小)的字体，即使两者具有相同的分辨率。为什么？因为当用户将 32"显示器用作屏幕时，他可能比将它用作电视的用户坐得离它更近。

代码:

body {font-size:14px;}

@media (min-width:1900px) {body {font-size:20px;}}

@media tv and (min-width:1900px) {body {font-size:30px;}}

应该做所有的工作(如果我理解媒体查询是如何工作的)。但他们不这样做 - 电视显示字体大小为 20px 的文本(这是因为 Sony Bravia TV 中的 Opera 浏览器不支持 tv - 多么讽刺......)。

所以我的问题是:还有哪些其他可能的电视检测技术？

1. User-Agent，但是当电视来参加派对时，它没有标准化的架构。

Answer 1

如果您有一台 50 英寸的电视和一台 32 英寸的显示器，两者都以相同的分辨率运行，您可以使用不使用 tv 和 语法的媒体查询。这是因为对于浏览器来说，两个屏幕本质上是一样的，除了 50"电视会有更多像素 ( see more here )。所以，你的媒体查询可以简单地关注 width 和/或 height 断点。

body {
  font-size: 14px;
}

@media screen and (min-width:500px) {
  body {
    font-size: 20px;
    color: blue;
  }
}

@media screen and (min-width:900px) {
  body {
    font-size: 30px;
    color: green;
  }
}

<p>Hello World</p>

注意:尝试以全尺寸模式运行上述代码并调整浏览器窗口的大小。您应该会看到字体大小和颜色相应地发生变化。