feat(前端优化): 针对小屏幕优化WebUI

assets/webui/ofdgo.css

@@ -35,7 +35,7 @@ body {
 	margin: 0;
 	width: 100%;
 	min-width: 320px;
-	min-height: 100vh;
+	min-height: 100dvh;
 	overflow: hidden;
 	background: #eef1f4;
 }
@@ -73,7 +73,7 @@ a:focus-visible {
 	display: grid;
 	grid-template-rows: auto minmax(0, 1fr) auto;
 	width: 100%;
-	height: 100vh;
+	height: 100dvh;
 	overflow: hidden;
 }
 

assets/webui/ofdgo.js

@@ -151,11 +151,7 @@ el.pageInput.addEventListener("change", () => {
 		renderPage(page - 1);
 	}
 });
-window.addEventListener("resize", () => {
-	if (state.doc) {
-		applyFit(false);
-	}
-});
+window.addEventListener("resize", resizeViewer);
 COMPACT_LAYOUT.addEventListener("change", syncLayoutMode);
 el.viewerPanel.addEventListener("scroll", () => {
 	schedulePageSync();
@@ -193,14 +189,14 @@ function toggleSidebar(side) {
 		state.showMeta = !state.showMeta;
 	}
 	updateSidebarState();
-	if (state.doc) {
-		applyFit(false);
-	}
+	resizeViewer();
 }
 
 function updateSidebarState() {
 	document.body.toggleAttribute("data-hide-pages", !state.showPages);
 	document.body.toggleAttribute("data-hide-meta", !state.showMeta);
+	el.pageListPanel.inert = !state.showPages;
+	el.metaPanel.inert = !state.showMeta;
 	el.togglePagesButton.setAttribute("aria-pressed", String(state.showPages));
 	el.toggleMetaButton.setAttribute("aria-pressed", String(state.showMeta));
 }
@@ -209,8 +205,15 @@ function syncLayoutMode(event) {
 	state.showPages = !event.matches;
 	state.showMeta = !event.matches;
 	updateSidebarState();
+	resizeViewer();
+}
+
+function resizeViewer() {
 	if (state.doc) {
 		applyFit(false);
+		if (state.fitMode === "height") {
+			scrollToPage(state.pageIndex);
+		}
 	}
 }