Update: 新主题（待完善）

1. 测试设备类型

Author: T-miracle

package/App.vue

@@ -15,90 +15,64 @@
     const ctl = controllerStore();
 
     const root = ref<HTMLElement | null>(null);
-    // const resizeObserver = ref<ResizeObserver | null>(null);
+    const resizeObserver = ref<ResizeObserver | null>(null);
 
     onMounted(() => {
-        // 判断设备类型(手机、平板、PC)
-        const userAgent = navigator.userAgent;
-        if (userAgent.match(/Android/i) || userAgent.match(/webOS/i) || userAgent.match(/iPhone/i) || userAgent.match(/iPad/i) || userAgent.match(/iPod/i) || userAgent.match(/BlackBerry/i) || userAgent.match(/Windows Phone/i)) {
-            // 移动端
-            const htmlEl = document.documentElement;
-            htmlEl.style.setProperty('font-size', '12px');
-            ctl.allowDrag = false;
-            ctl.articleFullscreen = true;
-            ctl.hideLeftSidebar = true;
-            ctl.hideRightSidebar = true;
-            ctl.hideActionBar = true;
-            ctl.hideHeaderTopNav = true;
-            ctl.hidePaths = true;
-            ctl.hideCopyright = true;
-        } else {
-            // PC端
-            const htmlEl = document.documentElement;
-            htmlEl.style.setProperty('font-size', '16px');
-            ctl.allowDrag = true;
-            ctl.articleFullscreen = false;
-            ctl.hideLeftSidebar = false;
-            ctl.hideRightSidebar = false;
-            ctl.hideActionBar = false;
-            ctl.hideHeaderTopNav = false;
-            ctl.hidePaths = false;
-            ctl.hideCopyright = false;
-        }
-
-        /* resizeObserver.value = new ResizeObserver((entries: ResizeObserverEntry[]) => {
+        resizeObserver.value = new ResizeObserver((entries: ResizeObserverEntry[]) => {
             const htmlEl = document.documentElement;
             for (const entry of entries) {
                 const { target } = entry;
                 const { clientWidth } = target as HTMLElement;
-                if (clientWidth >= 2560) {
-                    htmlEl.style.setProperty('font-size', '18px');
-                    ctl.allowDrag = true;
-                    ctl.articleFullscreen = false;
-                    ctl.hideLeftSidebar = false;
-                    ctl.hideRightSidebar = false;
-                    ctl.hideActionBar = false;
-                    ctl.hideHeaderTopNav = false;
-                    ctl.hidePaths = false;
-                    ctl.hideCopyright = false;
-                } else if (clientWidth >= 1920) {
-                    htmlEl.style.setProperty('font-size', '16px');
-                    ctl.allowDrag = true;
-                    ctl.articleFullscreen = false;
-                    ctl.hideLeftSidebar = false;
-                    ctl.hideRightSidebar = false;
-                    ctl.hideActionBar = false;
-                    ctl.hideHeaderTopNav = false;
-                    ctl.hidePaths = false;
-                    ctl.hideCopyright = false;
-                } else if (clientWidth >= 1280) {
-                    htmlEl.style.setProperty('font-size', '14px');
-                    ctl.allowDrag = false;
-                    ctl.articleFullscreen = false;
-                    ctl.hideLeftSidebar = false;
-                    ctl.hideRightSidebar = false;
-                    ctl.hideActionBar = false;
-                    ctl.hideHeaderTopNav = false;
-                    ctl.hidePaths = false;
-                    ctl.hideCopyright = false;
-                } else {
-                    htmlEl.style.setProperty('font-size', '12px');
-                    ctl.allowDrag = false;
-                    ctl.articleFullscreen = true;
-                    ctl.hideLeftSidebar = true;
-                    ctl.hideRightSidebar = true;
-                    ctl.hideActionBar = true;
-                    ctl.hideHeaderTopNav = true;
-                    ctl.hidePaths = true;
-                    ctl.hideCopyright = true;
-                }
+                setTimeout(() => {
+                    if (clientWidth >= 2560) {
+                        htmlEl.style.setProperty('font-size', '18px');
+                        ctl.allowDrag = true;
+                        ctl.articleFullscreen = false;
+                        ctl.hideLeftSidebar = false;
+                        ctl.hideRightSidebar = false;
+                        ctl.hideActionBar = false;
+                        ctl.hideHeaderTopNav = false;
+                        ctl.hidePaths = false;
+                        ctl.hideCopyright = false;
+                    } else if (clientWidth >= 1920) {
+                        htmlEl.style.setProperty('font-size', '16px');
+                        ctl.allowDrag = true;
+                        ctl.articleFullscreen = false;
+                        ctl.hideLeftSidebar = false;
+                        ctl.hideRightSidebar = false;
+                        ctl.hideActionBar = false;
+                        ctl.hideHeaderTopNav = false;
+                        ctl.hidePaths = false;
+                        ctl.hideCopyright = false;
+                    } else if (clientWidth >= 1280) {
+                        htmlEl.style.setProperty('font-size', '14px');
+                        ctl.allowDrag = false;
+                        ctl.articleFullscreen = false;
+                        ctl.hideLeftSidebar = false;
+                        ctl.hideRightSidebar = false;
+                        ctl.hideActionBar = false;
+                        ctl.hideHeaderTopNav = false;
+                        ctl.hidePaths = false;
+                        ctl.hideCopyright = false;
+                    } else {
+                        htmlEl.style.setProperty('font-size', '12px');
+                        ctl.allowDrag = false;
+                        ctl.articleFullscreen = true;
+                        ctl.hideLeftSidebar = true;
+                        ctl.hideRightSidebar = true;
+                        ctl.hideActionBar = true;
+                        ctl.hideHeaderTopNav = true;
+                        ctl.hidePaths = true;
+                        ctl.hideCopyright = true;
+                    }
+                }, 100);
             }
         });
-        resizeObserver.value.observe(root.value as HTMLElement); */
+        resizeObserver.value.observe(root.value as HTMLElement);
     });
 
     onBeforeUnmount(() => {
-        // resizeObserver.value?.disconnect();
+        resizeObserver.value?.disconnect();
     });
 </script>
 

package/components/NanoMain/index.vue

@@ -1,7 +1,7 @@
 <template>
     <div
         class="absolute bg-white mx-auto vp-doc"
-        un-h="[calc(100vh-var(--header-size)-var(--footer-size))]"
+        un-h="[calc(100%-var(--header-size)-var(--footer-size))]"
         un-top="[var(--header-size)]"
         :style="mainClass"
     >