diff --git a/src/settings/SettingsApp.vue b/src/settings/SettingsApp.vue
index ef61c70..25a8877 100644
--- a/src/settings/SettingsApp.vue
+++ b/src/settings/SettingsApp.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { setIcon } from "obsidian";
+import { Platform, setIcon } from "obsidian";
 import { computed, ref, watchEffect } from "vue";
 
 type ObsyncSettings = {
@@ -33,6 +33,7 @@ const emit = defineEmits<{
 
 const showSecretAccessKey = ref(false);
 const includeSecrets = ref(false);
+const isMobile = Platform.isMobile;
 const secretAccessKeyButton = ref<HTMLButtonElement | null>(null);
 const connectionConfigPreview = computed(() => {
   if (!includeSecrets.value) {
@@ -59,7 +60,7 @@ watchEffect(() => {
 </script>
 
 <template>
-  <main class="obsync-panel">
+  <main class="obsync-panel" :class="{ 'is-mobile': isMobile }">
     <header class="obsync-header">
       <div>
         <h2 class="obsync-title">Obsync 设置</h2>
diff --git a/src/styles.scss b/src/styles.scss
index 360d008..2078421 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -321,14 +321,6 @@
     @apply items-start;
   }
 
-  .obsync-row-block .obsync-row-title {
-    @apply flex-col;
-  }
-
-  .obsync-row-block .obsync-inline-switch {
-    @apply self-start;
-  }
-
   .obsync-row:not(.obsync-toggle-row) .obsync-inline-switch .obsync-switch {
     @apply mt-0;
   }
@@ -356,11 +348,21 @@
     @apply mt-2;
   }
 
-  .obsync-row:not(.obsync-toggle-row) .obsync-switch {
+  .obsync-row:not(.obsync-toggle-row) > .obsync-switch {
     @apply mt-2;
   }
 }
 
+.obsync-panel.is-mobile {
+  .obsync-row-block .obsync-row-title {
+    @apply flex-col;
+  }
+
+  .obsync-row-block .obsync-inline-switch {
+    @apply self-start;
+  }
+}
+
 @media (max-width: 560px) {
   .obsync-title {
     @apply text-xl;