google-cast - Targeting Chromecast with CSS Media Queries

Question

What CSS3 Media Queries can we use to target Chromecast in the graphics view?

It doesn't seem to respond at all to something like:

@media tv and (device-width: 1280px){...}

The only query I have been able to get to work was:

@media(min-width: 1265px){...}

Which seems bonkers to me because the overscan is 32px anyway.

What are the best queries to use?

So far the best layout I have found is:

@media(min-width: 1265px) {
    body {
        position: absolute;
        top: 18px;
        right: 32px;
        bottom: 18px;
        left: 32px;
        margin: 5px;
    }
}

Which allows for the 18px * 32px overscan and an apparent additional 5px margin

Answer 1

尼尔，目前我不知道通过媒体查询执行此操作的干净方法，但您可以使用用户代理指纹来发现您在 chromecast 设备上；例如，如果字符串“CrKey”和“TV”在用户代理中，那么您正在运行 chromecast。