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

我有遵循响应式Web设计技术的Web应用程序。我想为电视提供不同(较大)的字体大小，为屏幕提供不同(较小)的字体大小，即使它们的分辨率相同。为什么？因为当用户使用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-具有讽刺意味...)。

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

User-Agent，但是当电视参加聚会时，没有标准化的方案。

最佳答案

如果您有一台以相同分辨率运行的50英寸电视和32英寸显示器，则可以避免使用不使用tv and语法的媒体查询。这是因为对于浏览器，两个屏幕本质上都是相同的，除了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>

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

关于css - 出于CSS用途，将电视检测为客户端浏览器的所有可能方法，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17777272/