出于CSS目的，将电视检测为客户端浏览器的所有可能方法 [英] All possible ways to detect TV as client side browser for CSS purposes

问题描述

我有遵循响应式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-具有讽刺意味...).

所以我的问题是:还有什么其他电视检测技术?

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

解决方案

如果您的50英寸电视和32英寸显示器均以相同的分辨率运行，则可以避免使用不使用tv and语法.这是因为对于浏览器来说，两个屏幕本质上都是相同的，除了50英寸电视将具有更多像素(

 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> 

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

I have web application which follows responsive web design techniques. I'd like to serve different (bigger) font size for TV and different (smaller) for screen even when both have the same resolution. Why? Because when user uses 32" monitor as screen, he probably sits closer to it than user who uses it as TV.

The code:

body {font-size:14px;}

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

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

should do all the work (if I understand how media queries work right). But they don't - TV displays text with font size 20px (it's because Opera browser in Sony Bravia TV doesn't support tv - how ironic...).

So my question is: what other techniques of TV detection are possible?

1. User-Agent, but there is no standardized schema for it when TV comes to party.

解决方案

If you have a 50" TV and a 32" monitor both operating at the same resolution, you can get away with using media queries that do not use the tv and syntax. This is because to the browser, both screens will essentially be the same thing, with the exception that the 50" TV will have more pixels (see more here). So, your media query could simply focus on width and/or height breakpoints.

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>

Note: try running the above code in full size mode and resizing your browser window. You should see the font size and color change accordingly.

这篇关于出于CSS目的，将电视检测为客户端浏览器的所有可能方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！