В CSS нет возможности использовать реальные единицы измерения (см, дюймы), только относительные (css-пиксели тоже относительны). Устройства и браузеры ответственны за определение css-вьюпорта таким, чтобы сайт смотрелся на них читабельно. Подробнее об этом - в моем ответе к вопросу "В каких случаях (и где) используются данные единицы измерения CSS - px, CSS px, dip?".
С телевизорами проблема - они неадекватно определяют размер вьюпорта. Например, FullHD телевизор определяет вьюпорт как 1920*1080, хотя, с учетом размера экрана и средней дальностью экрана от зрителя - должен определять вьюпорт в районе 960*540, с плотностью пикселей равным двум.
Оптимальный размер вьюпорта можно рассчитывать здесь. А здесь можно изучить, какие размеры вьюпорта устройства ставят по стандарту.
Обычно мы доверяем определение размера вьюпорту устройству, вот таким кодом в <head>
:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
Но на проблемных устройствах нужно корректировать размер вьюпорта самим. Это можно делать в js, таким образом:
document.querySelector('meta[name=viewport]')
.setAttribute('content', 'width='+width+
',minimum-scale='+min_scale+
',maximum-scale='+max_scale+
',initial-scale='+init_scale);
Остается только научить сайт определять, на каком устройстве он запущен.
Для этого есть user-agent
браузера, и ширина/высота вьюпорта, определяемая устройством. Сопоставляя их, можно пытаться "угадать", какое устройство перед нами, и корректировать размер вьюпорта.
Существует плагин к modernizr - detectizr, призванный проводить эти соответствия за вас, и выдающий на выходе устройство, его модель, браузер и другие характеристики. По ним можно определять проблемные для вашего сайта устройства, и корректировать для них размер вьюпорта, через js.