fix white-screen error

Author: wsxiaolin

src/App.vue

@@ -28,17 +28,17 @@ import Msg from "./components/popup/msg.vue";
 import showUserCard from "./popup/usercard.ts";
 import Notification from "./components/popup/notification.vue";
 import Emitter from "./services/eventEmitter";
-import isUnsupportedBrowser from "./services/browser";
+// import isUnsupportedBrowser from "./services/browser";
 
-try {
-  if (isUnsupportedBrowser()) {
-    alert(
-      "Your browser is not supported. Please switch to a mainstream browser like Chrome, Firefox, Edge, or Safari for a better experience.你的浏览器不被支持，请更换为主流浏览器（如 Chrome、Firefox、Edge 或 Safari）以获得更好的体验。",
-    );
-  }
-} catch (e) {
-  // ignore detection errors
-}
+// try {
+//   if (isUnsupportedBrowser()) {
+//     alert(
+//       "Your browser is not supported. Please switch to a mainstream browser like Chrome, Firefox, Edge, or Safari for a better experience.你的浏览器不被支持，请更换为主流浏览器（如 Chrome、Firefox、Edge 或 Safari）以获得更好的体验。",
+//     );
+//   }
+// } catch (e) {
+//   // ignore detection errors
+// }
 
 function handleClick(event: MouseEvent) {
   const target = event.target as HTMLElement;
@@ -69,6 +69,11 @@ setTimeout(async () => {
 body {
   margin: 0;
 }
+/* # Ensure html/body have deterministic heights and provide a vh fallback for #app. */ */
+html,
+body {
+  height: 100%;
+}
 
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
@@ -79,5 +84,7 @@ body {
   width: 100vw;
   background-color: white;
   overscroll-behavior: none;
+  /* fallback to ensure non-zero height when viewport-unit quirks occur */
+  min-height: 100vh;
 }
 </style>

src/layout/Adaptation.vue

@@ -25,7 +25,10 @@ defineComponent({
 <style scoped>
 .basic-layout {
   position: relative;
+  /* prefer dynamic viewport height but provide fallbacks to avoid 0 on some browsers */
   height: 100dvh;
+  /* use JS-driven --vh when available (better on mobile), then fallback to 100vh */
+  min-height: calc(var(--vh, 1vh) * 100);
   width: 100vw;
   overflow: hidden;
   overflow-x: hidden;
@@ -47,7 +50,9 @@ defineComponent({
   top: var(--left-height);
   left: 0;
   width: 100vw;
+  /* keep dVh when available but fallback to calc(var(--vh)) and then standard vh */
   height: calc(100dvh - var(--left-height));
+  min-height: calc((var(--vh, 1vh) * 100) - var(--left-height));
 }
 
 .scroll-container {
@@ -78,14 +83,16 @@ defineComponent({
 @media (min-aspect-ratio: 1/1) {
   .layout-left {
     width: 50vw;
-    height: 100dvh;
+  height: 100dvh;
+  min-height: calc(var(--vh, 1vh) * 100);
   }
 
   .layout-right {
     top: 0;
     left: 50vw;
     width: 50vw;
-    height: 100dvh;
+  height: 100dvh;
+  min-height: calc(var(--vh, 1vh) * 100);
   }
 
   .scroll-container {

src/main.ts

@@ -44,4 +44,18 @@ window.$Logger = LogManager;
 window.$getPath = getPath;
 const errorLogger = new ErrorLogger(app);
 window.$ErrorLogger = errorLogger;
+// mobile/embedded browser viewport-vh fix:
+// set a CSS variable --vh to 1% of the innerHeight and update on resize.
+// Use this in CSS as: height: calc(var(--vh) * 100);
+function setVh() {
+  try {
+    const vh = window.innerHeight * 0.01;
+    document.documentElement.style.setProperty("--vh", `${vh}px`);
+  } catch (e) {
+    // ignore
+  }
+}
+setVh();
+window.addEventListener("resize", setVh);
+
 app.mount("#app");