在边缘上应用全屏媒体查询(& Chrome )

Question

我用CSS为全屏视频编写了一个简单的媒体查询，它可以在Firefox中应用我的代码，但不能在Edge或Chrome中使用。

CSS代码类似于：@media all and (display-mode: fullscreen) { .test { height: 250px; } }。

我读到你可以使用@supports (-ms-ime-align:auto)将CSS代码只应用于Edge，但是我怎么说浏览器应该只在全屏上应用代码呢？

编辑：

@supports (-ms-ime-align:auto) {
    .test:fullscreen {
        height: 250px;
    }
}

我有一个带有交互元素的视频，当用户在全屏上观看视频时，我必须对这些元素应用一些CSS代码，这在Firefox中有效。视频被嵌入到iFrame中，不知道它是否值得一提。

Answer 1

你可以在这里找到你的答案：

https://www.ryadel.com/css3-media-query-applicare-stili-internet-explorer-ie-ie6-ie11-firefox-chrome-safari-edge/

例如，尝试如下所示：

微软边缘

@支持(-ms-ime-align:auto) { .selector {属性:值；}}

Chrome 29+：

@媒体屏幕和(-webkit-min-device-pixel-ratio:0)和(最小分辨率：.001dpcm){ .chrome {属性:值；} }