diff --git a/packages/frontend/component/src/components/affine-banner/index.css.ts b/packages/frontend/component/src/components/affine-banner/index.css.ts
index bcadb24869..8e4b2c3ea6 100644
--- a/packages/frontend/component/src/components/affine-banner/index.css.ts
+++ b/packages/frontend/component/src/components/affine-banner/index.css.ts
@@ -3,8 +3,8 @@ import { style } from '@vanilla-extract/css';
 export const browserWarningStyle = style({
   backgroundColor: cssVar('backgroundWarningColor'),
   color: cssVar('warningColor'),
-  height: '36px',
   width: '100%',
+  padding: '8px 16px',
   fontSize: cssVar('fontSm'),
   display: 'flex',
   justifyContent: 'center',
diff --git a/packages/frontend/core/src/components/top-tip.tsx b/packages/frontend/core/src/components/top-tip.tsx
index d77be25c9b..9a9231a438 100644
--- a/packages/frontend/core/src/components/top-tip.tsx
+++ b/packages/frontend/core/src/components/top-tip.tsx
@@ -21,11 +21,13 @@ const shouldShowWarning = (() => {
     // disable in SSR
     return false;
   }
+  if (environment.isMobile) {
+    return true;
+  }
   if (environment.isChrome) {
     return environment.chromeVersion < minimumChromeVersion;
-  } else {
-    return !environment.isMobile;
   }
+  return false;
 })();
 
 const OSWarningMessage = () => {
@@ -36,6 +38,11 @@ const OSWarningMessage = () => {
     environment.isChrome &&
     environment.chromeVersion < minimumChromeVersion;
 
+  // TODO(@L-Sun): remove this message when mobile version is able to edit.
+  if ('isMobile' in environment && environment.isMobile) {
+    return <span>{t['com.affine.top-tip.mobile']()}</span>;
+  }
+
   if (notChrome) {
     return (
       <span>
@@ -48,6 +55,7 @@ const OSWarningMessage = () => {
   } else if (notGoodVersion) {
     return <span>{t['upgradeBrowser']()}</span>;
   }
+
   return null;
 };
 
diff --git a/packages/frontend/core/src/pages/workspace/detail-page/detail-page.css.ts b/packages/frontend/core/src/pages/workspace/detail-page/detail-page.css.ts
index 4b5007f7ae..24a179cc88 100644
--- a/packages/frontend/core/src/pages/workspace/detail-page/detail-page.css.ts
+++ b/packages/frontend/core/src/pages/workspace/detail-page/detail-page.css.ts
@@ -29,7 +29,6 @@ export const editorContainer = style({
 export const affineDocViewport = style({
   display: 'flex',
   flexDirection: 'column',
-  userSelect: 'none',
   containerName: 'viewport',
   containerType: 'inline-size',
   background: cssVar('backgroundPrimaryColor'),
diff --git a/packages/frontend/core/src/pages/workspace/detail-page/detail-page.tsx b/packages/frontend/core/src/pages/workspace/detail-page/detail-page.tsx
index 2ec3bf0f9d..6833cb3fe0 100644
--- a/packages/frontend/core/src/pages/workspace/detail-page/detail-page.tsx
+++ b/packages/frontend/core/src/pages/workspace/detail-page/detail-page.tsx
@@ -4,6 +4,7 @@ import type { ChatPanel } from '@affine/core/blocksuite/presets/ai';
 import { AIProvider } from '@affine/core/blocksuite/presets/ai';
 import { PageAIOnboarding } from '@affine/core/components/affine/ai-onboarding';
 import { useAppSettingHelper } from '@affine/core/hooks/affine/use-app-setting-helper';
+import { useDocMetaHelper } from '@affine/core/hooks/use-block-suite-page-meta';
 import { RecentDocsService } from '@affine/core/modules/quicksearch';
 import { ViewService } from '@affine/core/modules/workbench/services/view';
 import type { PageRootService } from '@blocksuite/blocks';
@@ -83,6 +84,7 @@ const DetailPageImpl = memo(function DetailPageImpl() {
   const mode = useLiveData(doc.mode$);
   const { appSettings } = useAppSettingHelper();
   const chatPanelRef = useRef<ChatPanel | null>(null);
+  const { setDocReadonly } = useDocMetaHelper(workspace.docCollection);
 
   const isActiveView = useIsActiveView();
   // TODO(@eyhn): remove jotai here
@@ -131,6 +133,12 @@ const DetailPageImpl = memo(function DetailPageImpl() {
     return;
   }, [doc, globalContext, isActiveView, mode]);
 
+  useEffect(() => {
+    if ('isMobile' in environment && environment.isMobile) {
+      setDocReadonly(doc.id, true);
+    }
+  }, [doc.id, setDocReadonly]);
+
   const isInTrash = useLiveData(doc.meta$.map(meta => meta.trash));
   useRegisterBlocksuiteEditorCommands();
   const title = useLiveData(doc.title$);
diff --git a/packages/frontend/i18n/src/resources/en.json b/packages/frontend/i18n/src/resources/en.json
index a4d8e66ec9..a21ba485ba 100644
--- a/packages/frontend/i18n/src/resources/en.json
+++ b/packages/frontend/i18n/src/resources/en.json
@@ -1325,6 +1325,7 @@
   "com.affine.toastMessage.successfullyDeleted": "Successfully deleted",
   "com.affine.today": "Today",
   "com.affine.tomorrow": "Tomorrow",
+  "com.affine.top-tip.mobile": "Limited to view-only on mobile.",
   "com.affine.trashOperation.delete": "Delete",
   "com.affine.trashOperation.delete.description": "Once deleted, you can't undo this action. Do you confirm?",
   "com.affine.trashOperation.delete.title": "Permanently delete",
diff --git a/packages/frontend/i18n/src/resources/zh-Hans.json b/packages/frontend/i18n/src/resources/zh-Hans.json
index 2ca5ce103c..a78c5e1333 100644
--- a/packages/frontend/i18n/src/resources/zh-Hans.json
+++ b/packages/frontend/i18n/src/resources/zh-Hans.json
@@ -1254,6 +1254,7 @@
   "com.affine.toastMessage.successfullyDeleted": "删除成功",
   "com.affine.today": "今天",
   "com.affine.tomorrow": "明日",
+  "com.affine.top-tip.mobile": "在移动设备上仅限于查看。",
   "com.affine.trashOperation.delete": "删除",
   "com.affine.trashOperation.delete.description": "一旦删除，您将无法撤销此操作。您确定吗？",
   "com.affine.trashOperation.delete.title": "永久删除",