1

My Web application is meant to be used on desktop computers and also on computers that are connected to TV screens.

I would like to apply different styling in these two different cases, but simple media queries do not work here: TVs resolutions are even smaller than computer monitors, even though the screen is much bigger.

Is there any way to detect such a scenario and apply proper styling ?

Kyll
  • 7,036
  • 7
  • 41
  • 64
Tomas Černius
  • 29
  • 1
  • 1
    This is exactly what a media query is used for. Detecting the resolution of the page, and applying styles based on that resolution. The size of the TV vs Monitor has nothing to do with this. – Andrew Burns Jul 10 '17 at 08:59
  • What do you mean it's even smaller? If TV is full hd then it's resolution is the same that res of full hd pc screen, isn't it? – lip3k Jul 10 '17 at 08:56

2 Answers2

0

there is a CSS media query to check if the client screen is a tv

@media tv

(instead of @media screen for a classic computer screen).

There is also @media projector.

Pac0
  • 21,465
  • 8
  • 65
  • 74
-1

Suggest to take a look at CSS Units, especially the ones beginning with v, which are relative to the viewport's size...

Usagi Miyamoto
  • 6,196
  • 1
  • 19
  • 33
  • A link to a potential solution is always welcome, but please [add more context around the link](//meta.stackoverflow.com/a/8259) so your fellow users will have some idea what it is and why it’s there. **Always quote the most relevant part of an important link, in case the target site is unreachable or goes permanently offline.** Take into account that being _barely more than a link to an external site_ is a possible reason as to [Why and how are some answers deleted?](//stackoverflow.com/help/deleted-answers). – Kyll Jul 10 '17 at 08:59