diff --git a/src/assets/main.css b/src/assets/main.css
index 586cc80..55cbd29 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -1,6 +1,10 @@
 @import "antd/dist/reset.css";
 
 :root {
+  --ss-safe-area-top: env(safe-area-inset-top, 0px);
+  --ss-safe-area-right: env(safe-area-inset-right, 0px);
+  --ss-safe-area-bottom: env(safe-area-inset-bottom, 0px);
+  --ss-safe-area-left: env(safe-area-inset-left, 0px);
   --ss-font-family:
     "PingFang SC", "PingFangTC-Regular", "Hiragino Sans GB", "Hiragino Sans",
     "STHeiti", "Heiti SC", "Noto Sans CJK SC", "Noto Sans SC", "Source Han Sans SC",
@@ -24,6 +28,18 @@ body,
   text-size-adjust: 100%;
 }
 
+#root {
+  position: fixed;
+  inset: 0;
+  width: 100vw;
+  height: 100dvh;
+  padding-top: var(--ss-safe-area-top);
+  padding-right: var(--ss-safe-area-right);
+  padding-bottom: var(--ss-safe-area-bottom);
+  padding-left: var(--ss-safe-area-left);
+  box-sizing: border-box;
+}
+
 input,
 textarea {
   user-select: text;
diff --git a/src/main.tsx b/src/main.tsx
index c362927..b4d9de2 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -127,7 +127,10 @@ const disableTouchZoom = () => {
 disableTouchZoom()
 
 const platform = navigator.userAgent.toLowerCase()
-if (platform.includes("mac")) {
+const isIos = /iphone|ipad|ipod/.test(platform)
+const isMacDesktop = platform.includes("mac") && !isIos
+
+if (isMacDesktop) {
   document.documentElement.classList.add("platform-macos")
 }