diff --git a/console/package.json b/console/package.json
index d25e38bca..46862a8f2 100644
--- a/console/package.json
+++ b/console/package.json
@@ -43,7 +43,6 @@
     "@codemirror/legacy-modes": "^6.3.0",
     "@codemirror/state": "^6.1.4",
     "@codemirror/view": "^6.5.1",
-    "codemirror": "^6.0.1",
     "@emoji-mart/data": "^1.0.8",
     "@formkit/core": "^0.17.3",
     "@formkit/i18n": "^0.17.3",
@@ -72,6 +71,7 @@
     "@vueuse/router": "^9.6.0",
     "@vueuse/shared": "^9.6.0",
     "axios": "^0.27.2",
+    "codemirror": "^6.0.1",
     "colorjs.io": "^0.4.3",
     "dayjs": "^1.11.7",
     "emoji-mart": "^5.3.3",
@@ -132,6 +132,7 @@
     "jsdom": "^20.0.3",
     "lint-staged": "^13.2.2",
     "postcss": "^8.4.21",
+    "postcss-viewport-height-correction": "^1.1.1",
     "prettier": "^2.8.8",
     "prettier-plugin-tailwindcss": "^0.1.13",
     "randomstring": "^1.2.3",
diff --git a/console/pnpm-lock.yaml b/console/pnpm-lock.yaml
index c57b259c1..8b1ca63a2 100644
--- a/console/pnpm-lock.yaml
+++ b/console/pnpm-lock.yaml
@@ -293,6 +293,9 @@ importers:
       postcss:
         specifier: ^8.4.21
         version: 8.4.21
+      postcss-viewport-height-correction:
+        specifier: ^1.1.1
+        version: 1.1.1
       prettier:
         specifier: ^2.8.8
         version: 2.8.8
@@ -9092,6 +9095,10 @@ packages:
     resolution: {integrity: sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==}
     dev: true
 
+  /picocolors@0.2.1:
+    resolution: {integrity: sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==}
+    dev: true
+
   /picocolors@1.0.0:
     resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
 
@@ -9206,6 +9213,21 @@ packages:
   /postcss-value-parser@4.2.0:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
 
+  /postcss-viewport-height-correction@1.1.1:
+    resolution: {integrity: sha512-kphLY4Au76uD2t4lZZ6mAExx6uMiWsxbFiBckfSJJZAbBZZGPNbLSztaDRSI4JUdKpK4JBbscfyKJf03Y2ae0g==}
+    engines: {node: '>=8.0.0'}
+    dependencies:
+      postcss: 7.0.39
+    dev: true
+
+  /postcss@7.0.39:
+    resolution: {integrity: sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==}
+    engines: {node: '>=6.0.0'}
+    dependencies:
+      picocolors: 0.2.1
+      source-map: 0.6.1
+    dev: true
+
   /postcss@8.4.21:
     resolution: {integrity: sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==}
     engines: {node: ^10 || ^12 || >=14}
diff --git a/console/postcss.config.js b/console/postcss.config.js
index 12a703d90..07e1c84c5 100644
--- a/console/postcss.config.js
+++ b/console/postcss.config.js
@@ -2,5 +2,6 @@ module.exports = {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},
+    "postcss-viewport-height-correction": {},
   },
 };
diff --git a/console/src/App.vue b/console/src/App.vue
index 49b30d27e..5772dd5ef 100644
--- a/console/src/App.vue
+++ b/console/src/App.vue
@@ -94,6 +94,26 @@ const formkitLocales = {
 };
 const formkitConfig = inject(Symbol.for("FormKitConfig")) as FormKitConfig;
 formkitConfig.locale = formkitLocales[i18n.global.locale.value] || "zh";
+
+// Fix 100vh issue in ios devices
+function setViewportProperty(doc: HTMLElement) {
+  let prevClientHeight: number;
+  const customVar = "--vh";
+  function handleResize() {
+    const clientHeight = doc.clientHeight;
+    if (clientHeight === prevClientHeight) return;
+    requestAnimationFrame(function updateViewportHeight() {
+      doc.style.setProperty(customVar, clientHeight * 0.01 + "px");
+      prevClientHeight = clientHeight;
+    });
+  }
+  handleResize();
+  return handleResize;
+}
+window.addEventListener(
+  "resize",
+  setViewportProperty(document.documentElement)
+);
 </script>
 
 <template>