fix: 解决浏览器兼容性问题

src/app/[locale]/providers.tsx

@@ -17,6 +17,7 @@ export const Providers = ({ children, themeProps }: ProvidersProps) => {
         // 调用响应式方法
         setHtmlFontSize();
     }, []);
+
     return (
         <ConfigProvider locale={enUS}>
             <NextUIProvider navigate={router.push}>{children}</NextUIProvider>

src/app/globals.scss

@@ -15,6 +15,9 @@
   --swiper-pagination-color: #fff;
   --swiper-pagination-bullet-active-bg: #fff;
   --swiper-pagination-bullet-inactive-color: hsla(0, 0%, 100%, .8);
+
+  --dvh-supported: 100dvh;
+
 }
 .home-banner{
   --swiper-pagination-bullet-width: 0.23rem;
@@ -42,10 +45,17 @@
 ::-webkit-scrollbar {
   width: 0;
 }
+// 如果支持100vh
+@supports not (height: 100dhv) {
+  :root {
+    --dvh-supported: 100vh;
+  }
+}
+//$height: 100dvh || 100vh;
 
 html, body {
-  height: 100dvh;
-  min-height: 100dvh;
+  height: var(--dvh-supported);
+  min-height:var(--dvh-supported);
   position: relative;
   font-family: helvetica neue, Helvetica, apple sd gothic neo, malgun gothic, Arial, sans-serif;
   box-sizing: border-box;
@@ -56,6 +66,7 @@ html {
 }
 body{
   position: relative;
+  background: #f8f8f8;
 }
 
 #app {
@@ -65,24 +76,22 @@ body{
     font-size: 0.14rem;
     background-color: var(--bg-color);
 
-  /*padding-bottom: 0.6rem;*/
-  /*padding-top: 0.6rem;*/
     position: relative;
     height: 100%;
     color: #fff;
-    //transform: translate(0,0);
+    transform: translate(0,0);
     overflow: hidden;
 }
 .main-footer-header{
-  height: calc(calc(100dvh - $-header-height) - $-footer-height);
+  height: calc(calc(var(--dvh-supported) - $-header-height) - $-footer-height);
   overflow-y: scroll;
 }
 .main-footer{
-  height: calc(100dvh  - $-footer-height);
+  height: calc(var(--dvh-supported)  - $-footer-height);
   overflow-y: scroll;
 }
 .main-header{
-  height: calc(100dvh  - $-header-height);
+  height: calc(var(--dvh-supported)  - $-header-height);
   overflow-y: scroll;
 }
 //main {