feat:init

src/hooks/usePageScale.ts

@@ -13,12 +13,19 @@ export function usePageScale() {
   const [windowWidth, setWindowWidth] = useState(window.innerWidth);
   const [windowHeight, setWindowHeight] = useState(window.innerHeight);
 
+  // 是否移动端竖屏（需要旋转横屏展示）
+  const isMobilePortrait = useMemo(() => {
+    const ua = window.navigator.userAgent.toLowerCase();
+    const isMobile = /iphone|ipad|ipod|android|mobile/.test(ua);
+    return isMobile && windowHeight > windowWidth;
+  }, [windowHeight, windowWidth]);
+
   // 缩放比例
   const scale = useMemo(() => {
-    const scaleX = windowWidth / DESIGN_WIDTH;
-    const scaleY = windowHeight / DESIGN_HEIGHT;
-
-    // 取较小的缩放比例，确保内容完全显示在视窗内
+    const baseWidth = DESIGN_WIDTH;
+    const baseHeight = DESIGN_HEIGHT;
+    const scaleX = windowWidth / baseWidth;
+    const scaleY = windowHeight / baseHeight;
     return Math.min(scaleX, scaleY);
   }, [windowWidth, windowHeight]);
 
@@ -39,13 +46,13 @@ export function usePageScale() {
   // 缩放样式对象
   const scaleStyle = useMemo(
     () => ({
-      transform: `scale(${scale})`,
-      transformOrigin: "top left",
+      position: "absolute" as const,
       width: `${DESIGN_WIDTH}px`,
       height: `${DESIGN_HEIGHT}px`,
-      position: "absolute" as const,
       left: `${offsetX}px`,
       top: `${offsetY}px`,
+      transform: `scale(${scale})`,
+      transformOrigin: "top left",
     }),
     [scale, offsetX, offsetY]
   );
@@ -78,6 +85,7 @@ export function usePageScale() {
 
     // 样式对象
     scaleStyle,
+    isMobilePortrait,
 
     // 常量
     DESIGN_WIDTH,