diff --git a/src/App.vue b/src/App.vue
index 1a2b7f5..cee6c6f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -27,10 +27,14 @@ const themeConfig = computed(() => {
 .layout-wrapper {
   isolation: isolate;
 }
-.w-screen {
-  width: 100dvw;
+@supports (height: 100dvh) {
+  .h-screen {
+    height: 100dvh;
+  }
 }
-.h-screen {
-  height: 100dvh;
+@supports (width: 100dvw) {
+  .w-screen {
+    width: 100dvw;
+  }
 }
 </style>
diff --git a/src/pages/index-new.page.vue b/src/pages/index-new.page.vue
index 7f73ec9..0b910a0 100644
--- a/src/pages/index-new.page.vue
+++ b/src/pages/index-new.page.vue
@@ -7,7 +7,7 @@ import {
 </script>
 
 <template>
-  <div class="p-4" style="height: 100dvh; width: 100dvw">
+  <div class="p-4 h-screen w-screen">
     <PatternBackground
       :animate="true"
       :direction="PATTERN_BACKGROUND_DIRECTION.TopRight"