fix: improve fit scaling on mobile

Author: dingyi222666

hooks/useFitScale.ts

@@ -14,19 +14,24 @@ export function useFitScale<T extends HTMLElement>() {
     const host = el.closest(".h-full") as HTMLElement | null;
 
     const measure = () => {
-      let avail = window.innerHeight;
+      const view = window.visualViewport?.height ?? window.innerHeight;
+      let avail = view;
       if (host) {
         const cs = getComputedStyle(host);
         const pad = parseFloat(cs.paddingTop) + parseFloat(cs.paddingBottom);
-        avail = host.clientHeight - pad;
+        avail = Math.min(view, Math.max(0, host.clientHeight - pad));
       }
 
       const natural = el.scrollHeight || el.getBoundingClientRect().height;
+      const coarse = window.matchMedia("(pointer: coarse)").matches;
+      const base = coarse ? 760 : SHORT_HEIGHT;
+      const min = coarse ? 0.86 : 0.78;
+      const max = coarse ? 0.98 : 0.94;
       const fit = natural > 0 && avail > 0
-        ? Math.min(1, (avail - FIT_PADDING) / natural)
+        ? Math.min(1, Math.max(0, (avail - FIT_PADDING) / natural))
         : 1;
-      const cap = avail < SHORT_HEIGHT
-        ? Math.min(0.94, Math.max(0.78, avail / SHORT_HEIGHT))
+      const cap = avail < base
+        ? Math.min(max, Math.max(min, avail / base))
         : 1;
       const scale = Math.min(1, fit, cap);
       const height = Math.ceil(natural * scale);
@@ -43,12 +48,15 @@ export function useFitScale<T extends HTMLElement>() {
 
     measure();
     const ro = new ResizeObserver(measure);
+    const viewport = window.visualViewport;
     ro.observe(el);
     if (host) ro.observe(host);
     window.addEventListener("resize", measure);
+    viewport?.addEventListener("resize", measure);
     return () => {
       ro.disconnect();
       window.removeEventListener("resize", measure);
+      viewport?.removeEventListener("resize", measure);
     };
   }, []);