ud

src/App.css

@@ -30,7 +30,7 @@ ul, li {
 
 .App-header {
   background-color: #282c34;
-  min-height: 100vh;
+  min-height: calc(100vh / var(--zoom-compensation, 1));
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -102,7 +102,7 @@ body {
 .layout {
   display: flex;
   flex-direction: column;
-  min-height: 100vh;
+  min-height: calc(100vh / var(--zoom-compensation, 1));
 }
 
 .layout-header {
@@ -120,7 +120,7 @@ body {
 
 .normal-p p {
   font-weight: 400;
-  font-size: 18px;
+  font-size: 1.125rem;
   color: #222222;
   line-height: 34px;
   margin-bottom: 20px;

src/App.tsx

@@ -8,12 +8,15 @@ import { useStore } from "@/store";
 import { parsePageConfig } from "@/utils/parsePageConfig";
 import type { I18nData, SupportLocale } from "@/type";
 import { destroyLenis, initLenis } from "@/utils/lenis";
+import useZoomCompensation from "@/hooks/useZoomCompensation";
 
 // function AppRoutes() {
 //     return useRoutes(routes);
 // }
 
 function App() {
+    useZoomCompensation();
+
     const [init, setInit] = useState(false);
     const locale = useStore((s) => s.locale);
     const appConfig = useStore((s) => s.appConfig);

src/components/Banner.module.css

@@ -1,7 +1,7 @@
 /* Hero */
 .hero {
   position: relative;
-  min-height: 100vh;
+  min-height: calc(100vh / var(--zoom-compensation, 1));
   background-size: cover;
   background-position: center;
   padding-bottom: 3.125rem;

src/components/ScreenOpen/index.module.css

@@ -1,6 +1,6 @@
 .screenOpen {
     width: 100%;
-    height: 100vh;
+    height: calc(100vh / var(--zoom-compensation, 1));
     position: fixed;
     top: 0;
     left: 0;
@@ -21,7 +21,7 @@
 
     .screenOpenBackground {
         width: 100%;
-        height: 100vh;
+        height: calc(100vh / var(--zoom-compensation, 1));
         position: absolute;
         top: 0;
         left: 0;

src/components/layout/BottomTabsSection/index.module.css

@@ -3,7 +3,7 @@
     overflow: hidden;
     width: 100%;
     /* height: 67.5rem; */
-    height: 100vh;
+    height: calc(100vh / var(--zoom-compensation, 1));
     padding: 6.25rem 0;
     background-size: cover;
     background-position: center;

src/components/layout/JobPage/index.module.css

@@ -1,6 +1,6 @@
 .jobPage {
     width: 100%;
-    min-height: 100vh;
+    min-height: calc(100vh / var(--zoom-compensation, 1));
     padding: 7.5rem 6.25rem;
 
     .jobPageHeaderLine {

src/components/layout/RowAccordion/index.module.css

@@ -6,7 +6,7 @@
     overflow-anchor: none;
     /* padding: 0 16.25rem; */
     width: 100%;
-    height: 100vh;    
+    height: calc(100vh / var(--zoom-compensation, 1));    
 }
 .rowAccordionBgContainer {
     position: absolute;

src/components/layout/SwiperCardSection/index.module.css

@@ -1,5 +1,5 @@
 .swiperCardSection {
-    min-height: 100vh;
+    min-height: calc(100vh / var(--zoom-compensation, 1));
     padding: 6.25rem 16.25rem;
     background: #D8D8D8;
 }

src/components/layout/TopTabsSection/index.module.css

@@ -1,7 +1,7 @@
 .topTabsSection {
     padding: 6.25rem 16.25rem 9.375rem 16.25rem;
     width: 100%;
-    min-height: 100vh;
+    min-height: calc(100vh / var(--zoom-compensation, 1));
     background-size: cover;
     background-position: center;
     background-repeat: repeat;

src/hooks/useZoomCompensation.ts

@@ -0,0 +1,54 @@
+import { useEffect } from 'react';
+
+const INITIAL_DPR = window.devicePixelRatio || 1;
+
+/**
+ * 监听浏览器缩放（Ctrl+/Ctrl-），通过 CSS zoom 反向补偿，
+ * 使页面视觉比例始终保持与初始加载时一致。
+ *
+ * 原理：浏览器缩放会改变 window.devicePixelRatio，
+ * 据此计算补偿系数 1/(currentDPR/initialDPR) 设置到 html 元素上。
+ */
+export default function useZoomCompensation() {
+  useEffect(() => {
+    let cancelled = false;
+
+    function applyCompensation() {
+      const currentDPR = window.devicePixelRatio || 1;
+      const zoomFactor = currentDPR / INITIAL_DPR;
+      const html = document.documentElement;
+      const htmlStyle = html.style as CSSStyleDeclaration & { zoom: string };
+      const compensation = 1 / zoomFactor;
+      if (Math.abs(zoomFactor - 1) > 0.01) {
+        htmlStyle.zoom = `${compensation}`;
+        html.style.setProperty('--zoom-compensation', `${compensation}`);
+      } else {
+        htmlStyle.zoom = '';
+        html.style.setProperty('--zoom-compensation', '1');
+      }
+    }
+
+    function watchDPR() {
+      const mq = window.matchMedia(
+        `(resolution: ${window.devicePixelRatio}dppx)`,
+      );
+      mq.addEventListener(
+        'change',
+        () => {
+          if (cancelled) return;
+          applyCompensation();
+          watchDPR();
+        },
+        { once: true },
+      );
+    }
+
+    applyCompensation();
+    watchDPR();
+
+    return () => {
+      cancelled = true;
+      (document.documentElement.style as CSSStyleDeclaration & { zoom: string }).zoom = '';
+    };
+  }, []);
+}

src/index.css

@@ -2,6 +2,7 @@
 :root {
   --design-rem-base: 16px;
   --ui-scale: 1;
+  --zoom-compensation: 1;
 }
 
 html {

src/pages/About/About.module.css

@@ -1,7 +1,7 @@
 /* Section block - full-width with background */
 .section {
   position: relative;
-  min-height: 100vh;
+  min-height: calc(100vh / var(--zoom-compensation, 1));
   background-size: cover;
   background-position: center;
   display: flex;

src/pages/About/Founder.module.css

@@ -1,7 +1,7 @@
 .section {
   background: rgba(255, 255, 255, 0.6);
   border-radius: 0;
-  min-height: 100vh;
+  min-height: calc(100vh / var(--zoom-compensation, 1));
   width: 100%;
   padding: 6.25rem 16.25rem;
   display: flex;
@@ -109,7 +109,7 @@
 
 .sectionFounder {
   padding: 6.25rem 0 9.375rem;
-  min-height: 100vh;
+  min-height: calc(100vh / var(--zoom-compensation, 1));
 }
 
 .founderIntroduction h2 {

src/pages/About/History.module.css

@@ -7,7 +7,7 @@
     rgba(200, 200, 205, 0.3) .125rem,
     rgba(200, 200, 205, 0.3) .25rem
   );
-  min-height: 100vh;
+  min-height: calc(100vh / var(--zoom-compensation, 1));
   width: 100%;
   padding: 6.25rem auto;
   padding-bottom: 9.375rem;

src/pages/Business/CommercialGroup.module.css

@@ -134,7 +134,7 @@
 /* Features Section */
 .featuresHero {
   width: 100%;
-  height: 100vh;
+  height: calc(100vh / var(--zoom-compensation, 1));
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
@@ -223,7 +223,7 @@
 }
 
 .propertyServices {
-  height: 100vh;
+  height: calc(100vh / var(--zoom-compensation, 1));
   color: #fff;
   padding: 0 16.25rem;
 }

src/pages/Business/InvestGroup.module.css

@@ -83,7 +83,7 @@
 
 .industryFoster {
     width: 100%;
-    height: 100vh;
+    height: calc(100vh / var(--zoom-compensation, 1));
     display: flex;
     align-items: center;
     position: relative;

src/pages/Home/Home.module.css

@@ -1,7 +1,7 @@
 /* Hero */
 .hero {
   position: relative;
-  min-height: 100vh;
+  min-height: calc(100vh / var(--zoom-compensation, 1));
   background-size: cover;
   background-position: center;
 }
@@ -43,7 +43,7 @@
 /* Commercial */
 .commercial {
   position: relative;
-  height: 100vh;
+  height: calc(100vh / var(--zoom-compensation, 1));
   background-size: cover;
   background-position: center;
   display: flex;