CSS `Display Mode` (`fullscreen`, `standalone`) 媒体查询与 PWA 体验

各位观众老爷们，晚上好！今天咱们来聊聊 CSS 媒体查询里的 display-mode 这货，以及它跟 PWA (Progressive Web App) 体验之间不得不说的故事。这玩意儿听起来挺玄乎，但其实理解起来就像理解“你妈觉得你冷”一样简单直接。

开场白：啥是 Display Mode？

首先，咱们得搞清楚 display-mode 是个啥玩意。简单来说，display-mode 是一个 CSS 媒体查询，它能告诉你你的 PWA 当前是以哪种模式运行的。这几种模式就好像你穿不同的衣服一样，虽然都是你，但场合不一样，穿的衣服也不一样嘛。

主要有以下几种模式：

browser: 顾名思义，就是普通的浏览器标签页里运行。就像你平时浏览网页一样。
minimal-ui: 也是在浏览器里，但浏览器提供的 UI 元素会少一些。通常会隐藏地址栏，给你更大的内容展示空间。
standalone: 像个独立应用一样运行，隐藏了浏览器的所有 UI 元素，看起来更像原生 App。
fullscreen: 全屏模式，霸占你的整个屏幕，啥浏览器 UI 都看不见。玩游戏或者看视频的时候经常用到。

Display Mode 和 PWA 的爱恨情仇

PWA 的目标是提供像原生 App 一样的体验，所以 display-mode 对 PWA 至关重要。通过 display-mode，你可以根据不同的运行模式来调整你的网站样式，从而提供最佳的用户体验。

代码说话：Display Mode 怎么用？

光说不练假把式，咱们直接上代码。假设我们想根据不同的 display-mode 来设置页面的背景颜色：

body {
  background-color: #f0f0f0; /* 默认背景色 */
}

@media all and (display-mode: browser) {
  body {
    background-color: lightblue; /* 浏览器模式下背景色 */
  }
}

@media all and (display-mode: standalone) {
  body {
    background-color: lightgreen; /* 独立应用模式下背景色 */
  }
}

@media all and (display-mode: fullscreen) {
  body {
    background-color: black;
    color: white; /* 全屏模式下背景色和文字颜色 */
  }
}

@media all and (display-mode: minimal-ui) {
    body {
        background-color: lightcoral; /* 精简UI模式下的背景色 */
    }
}

这段代码的意思是：

默认情况下，页面背景色是淡灰色 (#f0f0f0)。
如果在浏览器模式下运行，背景色变成淡蓝色 (lightblue)。
如果在独立应用模式下运行，背景色变成淡绿色 (lightgreen)。
如果在全屏模式下运行，背景色变成黑色 (black)，文字颜色变成白色 (white)。
如果在精简UI模式下运行，背景色变成浅珊瑚色(lightcoral)。

是不是很简单粗暴？

进阶玩法：结合 JavaScript

除了 CSS，我们还可以用 JavaScript 来获取 display-mode。虽然 JavaScript 本身没有直接获取 display-mode 的 API，但我们可以通过 window.matchMedia() 方法来判断当前的 display-mode。

function getDisplayMode() {
  if (window.matchMedia('(display-mode: standalone)').matches) {
    return 'standalone';
  } else if (window.matchMedia('(display-mode: fullscreen)').matches) {
    return 'fullscreen';
  } else if (window.matchMedia('(display-mode: minimal-ui)').matches) {
      return 'minimal-ui';
  } else {
    return 'browser';
  }
}

const displayMode = getDisplayMode();
console.log('当前 Display Mode:', displayMode);

// 根据 Display Mode 执行不同的操作
if (displayMode === 'standalone') {
  // 隐藏某些浏览器相关的 UI 元素
  console.log("当前是 Standalone 模式，可以进行一些定制化操作");
} else if (displayMode === 'fullscreen') {
  // 处理全屏模式下的逻辑
  console.log("当前是 Fullscreen 模式，可以进行一些定制化操作");
}

这段代码首先定义了一个 getDisplayMode() 函数，它通过 window.matchMedia() 来判断当前的 display-mode。然后，我们调用这个函数，获取当前的 display-mode，并根据不同的 display-mode 执行不同的操作。

PWA Manifest：控制 Display Mode 的幕后黑手

display-mode 的具体值是由 PWA 的 manifest 文件控制的。 manifest 文件是一个 JSON 文件，它描述了 PWA 的各种元数据，包括应用名称、图标、启动 URL 等等。

在 manifest 文件中，我们可以通过 display 字段来指定 PWA 的 display-mode。

{
  "name": "我的 PWA 应用",
  "short_name": "PWA",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "/icon.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ]
}

在这个例子中，display 字段的值是 standalone，这意味着 PWA 默认会以独立应用模式运行。

display 字段可以取以下几个值：

browser: 默认值，以普通浏览器标签页运行。
minimal-ui: 以精简 UI 模式运行。
standalone: 以独立应用模式运行。
fullscreen: 以全屏模式运行。

敲黑板，划重点：Display Mode 的优先级

display-mode 的最终值是由多个因素决定的，包括 manifest 文件、浏览器设置、用户行为等等。浏览器会根据这些因素来决定最终的 display-mode。

一般来说，优先级从高到低是：

用户行为 (例如，用户手动进入全屏模式)。
manifest 文件的 display 字段。
浏览器默认设置。

实战演练：打造更友好的 PWA 体验

现在，咱们来结合 display-mode，打造一个更友好的 PWA 体验。

场景一：隐藏浏览器地址栏

在 standalone 模式下，我们通常希望隐藏浏览器的地址栏，让 PWA 看起来更像原生 App。

@media all and (display-mode: standalone) {
  /* 隐藏地址栏的 trick，不是真正的隐藏，而是让页面占据更多空间 */
  body {
    margin: 0; /* 去掉默认的 margin */
    padding: 0; /* 去掉默认的 padding */
  }

  /* 如果有固定定位的 header 或 footer，需要特殊处理 */
  header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    /* 其他样式 */
  }

  footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    /* 其他样式 */
  }
}

这段代码的主要思路是：

去掉 body 元素的默认 margin 和 padding，让页面占据更多的空间。
如果有固定定位的 header 或 footer，需要特殊处理，确保它们不会被地址栏遮挡。

场景二：自定义启动画面

在 PWA 启动时，我们可以自定义启动画面，让用户感觉更像是在启动一个原生 App。

虽然 display-mode 本身不能直接控制启动画面，但我们可以通过 CSS 和 JavaScript 来模拟启动画面。

<!DOCTYPE html>
<html>
<head>
  <title>PWA 启动画面</title>
  <style>
    /* 启动画面样式 */
    #splash-screen {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #ffffff;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9999; /* 确保在最上层 */
    }

    #splash-screen img {
      width: 100px;
      height: 100px;
    }
  </style>
</head>
<body>
  <div id="splash-screen">
    <img src="/icon.png" alt="应用图标">
  </div>

  <!-- 你的应用内容 -->
  <div id="app-content" style="display: none;">
    <h1>欢迎来到我的 PWA 应用!</h1>
  </div>

  <script>
    // 模拟启动画面
    window.addEventListener('load', () => {
      setTimeout(() => {
        document.getElementById('splash-screen').style.display = 'none';
        document.getElementById('app-content').style.display = 'block';
      }, 2000); // 2秒后隐藏启动画面
    });
  </script>
</body>
</html>

这段代码的思路是：

创建一个 splash-screen 元素，作为启动画面。
在 splash-screen 中显示应用图标。
在页面加载完成后，延迟 2 秒隐藏 splash-screen，并显示应用内容。

场景三：全屏模式下的优化

在全屏模式下，我们需要特别注意用户体验。例如，我们可以隐藏所有不必要的 UI 元素，让用户专注于内容。

@media all and (display-mode: fullscreen) {
  /* 隐藏导航栏 */
  nav {
    display: none;
  }

  /* 调整内容区域的样式 */
  main {
    margin: 0;
    padding: 0;
  }
}

注意事项：兼容性问题

虽然 display-mode 媒体查询已经得到了主流浏览器的支持，但仍然存在一些兼容性问题。特别是在一些老版本的浏览器上，可能不支持 display-mode 媒体查询。

为了解决兼容性问题，我们可以使用一些 polyfill 或 fallback 方案。例如，我们可以通过 JavaScript 来检测浏览器是否支持 display-mode 媒体查询，如果不支持，则使用一些默认的样式。

Display Override：更高级的控制

PWA 规范中还提到了一种叫做 "Display Override" 的机制。它允许开发者通过 navigator.getInstalledRelatedApps() API 来查询当前 PWA 的安装状态，并根据安装状态来动态修改 display-mode。

虽然 Display Override 机制还处于实验阶段，但它为我们提供了更灵活的控制 display-mode 的方式。

总结：Display Mode，PWA 的好帮手

总而言之，display-mode 是一个非常有用的 CSS 媒体查询，它可以帮助我们根据不同的运行模式来优化 PWA 的用户体验。通过结合 CSS 和 JavaScript，我们可以打造出更像原生 App 的 PWA 应用。

希望今天的讲座对大家有所帮助。谢谢大家！

发表回复 取消回复

发表回复取消回复