CSS 媒體查詢顯示模式：全屏在 safari 上不起作用

Question

CSS 媒體查詢顯示模式：全屏在 safari 上不起作用（媒體查詢中的 css 永遠不會應用）。 當前 safari 版本：版本 14.1。

@media all and (display-mode: fullscreen) {
...
}

完整示例在這里： https://jsfiddle.net/gnbcv6em/3/它適用於 chrome 但不適用於 safari。我嘗試使用瀏覽器的全屏鍵盤快捷鍵觸發全屏或使用 js 手動觸發全屏，但均不適用於 safari。

此外， https://developer.mozilla.org/en-US/docs/Web/CSS/@media/display-mode顯示 safari 支持它。

也許有人遇到過這個問題並且可以提供幫助？

Answer 1

面臨同樣的問題。 解決了這個：

body:-webkit-full-screen .selector {
  display: none;
}

和 SCSS 版本（如果你有嵌套的選擇器）：

@at-root body:-webkit-full-screen & {
  display: none;
}

目前 Safari不支持:fullscreen選擇器，所以需要使用:-webkit-full-screen 。