全屏媒体查询

Posted 2023-03-06

【中文标题】全屏媒体查询

【英文标题】：Media query for fullscreen

【发布时间】：2015-12-31 11:29:00

【问题描述】：

我使用以下媒体查询在全屏模式下应用我的 CSS 覆盖：

@media (device-width: 100vw) and (device-height: 100vh) 
  .content 
    padding: 0px !important;
  

In 在 Firefox 中完美运行，但在 Chrome 中非常不可靠（Windows 7 x64 上的两个最新版本）。我只能在不处于全屏模式但需要反转查询时尝试应用我的覆盖。所以我的问题是：

Chrome 应该支持查询吗？ 如何否定它（逻辑非）？

附言

我的viewport 声明如下：

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

【问题讨论】：

我在 Linux 上遇到了相反的情况：这个媒体查询在 Chrome 中有效，在 Firefox 上无效

【参考方案1】：

使用新的 css 功能display-mode

@media all and (display-mode: fullscreen) 
  .content 
    padding: 0px;
  

同时避免使用!important，因为它是bad practice

您可以使用not 否定@media 规则。详情请见here。

【讨论】：

问题还问如何否定它！？

【参考方案2】：

收听全屏事件可能不那么优雅，但更健壮，然后可能会在正文中添加一个is-fullscreen 类，这样您就可以像这样编写规则：

body.is-fullscreen .content  padding...

例如：

document.addEventListener('fullscreenchange', function() 
  document.body.classList.toggle('is-fullscreen', document.fullscreenEnabled);
);

此活动具有供应商前缀版本，因此请确保您使用的是您需要的版本。