5

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.
TheFrost
  • 1,265
  • 2
  • 15
  • 29

1 Answers1

0

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.

CodeCheshire
  • 710
  • 1
  • 8
  • 27
  • @CodeChesire, if both TVs have the same resolution then only one breakpoint will match for both occasions. Did I miss something? – TheFrost Aug 10 '18 at 10:37
  • CSS media queries typically work by the concept of overriding each other. I modified the example above so it is a working code snippet. While screen resolution may be the same, because one TV is bigger than the other, one will have more pixels on the screen, so you can apply breakpoints that override each other. In other words, having two TVs with different sizes but at the same resolution is basically the same as resizing your browser on a single screen – CodeCheshire Aug 10 '18 at 16:21