Fix narrow PWA layout on tablet with standalone width rules.

Allow any orientation in manifest, widen content and enable dual-column mode in installed apps on tablet viewports, with iOS display-mode fallback.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-06-11 09:07:48 +08:00
parent 234ce18756
commit 98b83a5f75
8 changed files with 61 additions and 5 deletions
+19
View File
@@ -0,0 +1,19 @@
"use client";
import { useEffect } from "react";
/** iOS / iPad PWA 部分版本不识别 display-mode 媒体查询,用 data 属性兜底 */
export default function PwaDisplayMode() {
useEffect(() => {
const standalone =
window.matchMedia("(display-mode: standalone)").matches ||
(window.navigator as Navigator & { standalone?: boolean }).standalone ===
true;
if (standalone) {
document.documentElement.dataset.displayMode = "standalone";
}
}, []);
return null;
}