How to handle different TV resolutions

Hi, I am relatively new to TV development, and I was wondering the best way to handle different TV resolutions. I know in the docs, it says to assume a default resolution of 1920x1080, and to use the precision property for scaling, but is there a way to dynamically detect the resolution? When I am testing on different devices, I notice that sometimes the scale is too zoomed in, and it would be nice to have things automatically rescale.

Hi - Usually TV’s will render browsers at a max resolution of 1080p. But you can setup the resolution with something like:

const SUPPORTED_RESOLUTIONS = {
‘720p’: { h: 720, w: 1280, precision: 2 / 3 },
‘1080p’: { h: 1080, w: 1920, precision: 1 }
};
const wh = window.innerHeight;
const ww = window.innerWidth;
const resolution = Object.values(SUPPORTED_RESOLUTIONS)
.find(supported => supported.h === wh && supported.w === ww) || SUPPORTED_RESOLUTIONS[‘720p’];
return resolution;

2 Likes