All possible ways to detect TV as client side browser for CSS purposes

问题

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.

回答1:

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.

来源：https://stackoverflow.com/questions/17777272/all-possible-ways-to-detect-tv-as-client-side-browser-for-css-purposes