如何准确判断Web应用处于Standalone模式？解决样式异常问题

问题详情 #

我开发了支持Standalone模式的Web应用，用户添加到主屏幕后可像原生应用一样展示。为适配手机刘海屏，我用了Tailwind的standalone:pt-12条件样式，多数组件表现正常，但React-Hot-Toast库的条件样式时而生效时而失效。我的判断逻辑如下：

// _app.tsx
const isStandalone =
  typeof window !== 'undefined' &&
  window.matchMedia('(display-mode: standalone)').matches;

return (
  <div className="flex flex-col min-h-screen h-full standalone:pt-12">
    <Toaster
      containerStyle={{ top: isStandalone ? '54px' : '8px' }}
    />
    {/* 其他组件 */}
  </div>

固定设置top:'54px'时样式正常，但用变量就出问题，怀疑isStandalone变量无法始终正确赋值，求更可靠的Standalone模式判断方法。

解决方案 #

1. 监听媒体查询的实时变化 #

核心问题是你只在组件初始化时判断了一次显示模式，没处理运行时的模式切换（比如用户刚添加到主屏幕后首次打开、从浏览器切到独立模式）。给matchMedia添加监听，实时更新状态：

import { useState, useEffect } from 'react';
import { Toaster } from 'react-hot-toast';

function MyApp({ Component, pageProps }) {
  const [isStandalone, setIsStandalone] = useState(false);

  useEffect(() => {
    if (typeof window === 'undefined') return;
    
    const mediaQuery = window.matchMedia('(display-mode: standalone)');
    // 定义更新函数
    const updateStatus = (e) => setIsStandalone(e.matches);
    
    // 初始赋值
    updateStatus(mediaQuery);
    // 添加监听，捕获模式变化
    mediaQuery.addEventListener('change', updateStatus);
    
    // 组件卸载时清理监听
    return () => mediaQuery.removeEventListener('change', updateStatus);
  }, []);

  return (
    <div className="flex flex-col min-h-screen h-full standalone:pt-12">
      <Toaster containerStyle={{ top: isStandalone ? '54px' : '8px' }} />
      <Component {...pageProps} />
    </div>
  );
}

export default MyApp;

2. 兼容iOS的navigator.standalone属性 #

部分iOS Safari的PWA在特殊场景下，matchMedia可能不准确，苹果专门提供了navigator.standalone属性用于判断PWA独立模式，结合起来用更稳妥：

// 封装判断函数
const checkIsStandalone = () => {
  if (typeof window === 'undefined') return false;
  // 优先用标准matchMedia，兼容iOS的特殊属性
  return window.matchMedia('(display-mode: standalone)').matches || 
         (window.navigator as any).standalone === true;
};

// 在useEffect里调用并监听变化
useEffect(() => {
  const mediaQuery = window.matchMedia('(display-mode: standalone)');
  const updateStatus = () => setIsStandalone(checkIsStandalone());
  
  updateStatus();
  mediaQuery.addEventListener('change', updateStatus);
  return () => mediaQuery.removeEventListener('change', updateStatus);
}, []);

3. 让Tailwind变体与状态完全同步（可选） #

如果想让Tailwind的standalone:样式和React-Hot-Toast的状态完全一致，可把状态挂载到HTML根元素的类名上，自定义Tailwind变体：

步骤1：在组件中同步根元素类名

useEffect(() => {
  if (typeof window === 'undefined') return;
  const htmlRoot = document.documentElement;
  isStandalone ? htmlRoot.classList.add('standalone') : htmlRoot.classList.remove('standalone');
}, [isStandalone]);

步骤2：在tailwind.config.js中自定义变体

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  variants: {
    extend: {
      padding: ['standalone'], // 给padding添加standalone变体
    },
  },
  plugins: [
    function({ addVariant }) {
      addVariant('standalone', '.standalone &');
    },
  ],
};

这样Tailwind的standalone:pt-12会和你的isStandalone状态完全绑定，不会出现样式不一致的情况。

失效原因分析 #

你原来的代码只在组件首次渲染时获取一次matchMedia结果，但PWA的显示模式可能在运行时发生变化：

• 用户刚把应用添加到主屏幕后首次打开，浏览器的显示模式状态可能还没同步
• 用户从浏览器直接切换到独立模式（部分系统支持）
• 部分浏览器对display-mode的初始判断存在延迟

这些场景都会导致isStandalone的值不是最新的，进而让React-Hot-Toast的top值错误。

内容的提问来源于stack exchange，提问作者Ripas55