diff --git a/packages/core/src/App.ts b/packages/core/src/App.ts
index 41353228..22b897f1 100644
--- a/packages/core/src/App.ts
+++ b/packages/core/src/App.ts
@@ -70,8 +70,7 @@ class App extends EventEmitter {
     // 根据屏幕大小计算出跟节点的font-size，用于rem样式的适配
     if (this.platform === 'mobile' || this.platform === 'editor') {
       const calcFontsize = () => {
-        let { width } = document.documentElement.getBoundingClientRect();
-        width = Math.min(800, width);
+        const { width } = document.documentElement.getBoundingClientRect();
         const fontSize = width / (this.designWidth / 100);
         document.documentElement.style.fontSize = `${fontSize}px`;
       };
diff --git a/playground/src/components/DeviceGroup.vue b/playground/src/components/DeviceGroup.vue
index 81ae6ba9..e0c75bba 100644
--- a/playground/src/components/DeviceGroup.vue
+++ b/playground/src/components/DeviceGroup.vue
@@ -49,10 +49,9 @@ export default defineComponent({
 
   setup(props, { emit }) {
     const calcFontsize = (width: number) => {
-      const fontSize = width / 3.75;
       const { iframe } = editorService.get<StageCore>('stage').renderer;
       if (!iframe?.contentWindow) return;
-      iframe.contentWindow.document.documentElement.style.fontSize = `${fontSize}px`;
+      iframe.contentWindow.appInstance.designWidth = width;
     };
 
     const viewerDevice = ref(DeviceType.Phone);
diff --git a/runtime/react/page/main.tsx b/runtime/react/page/main.tsx
index 99b7de51..ccd81aab 100644
--- a/runtime/react/page/main.tsx
+++ b/runtime/react/page/main.tsx
@@ -50,7 +50,10 @@ const getLocalConfig = (): MApp[] => {
 
 window.magicDSL = [];
 
+const designWidth = document.documentElement.getBoundingClientRect().width;
+
 const app = new Core({
+  designWidth,
   config: ((getUrlParam('localPreview') ? getLocalConfig() : window.magicDSL) || [])[0] || {},
   curPage: getUrlParam('page'),
 });
diff --git a/runtime/react/playground/main.tsx b/runtime/react/playground/main.tsx
index 57340902..f9c0ee01 100644
--- a/runtime/react/playground/main.tsx
+++ b/runtime/react/playground/main.tsx
@@ -29,11 +29,16 @@ import plugins from '../.tmagic/plugin-entry';
 
 import App from './App';
 
+const designWidth = document.documentElement.getBoundingClientRect().width;
+
 const app = new Core({
+  designWidth,
   config: {},
   platform: 'editor',
 });
 
+window.appInstance = app;
+
 let curPageId = '';
 
 const updateConfig = (root: MApp) => {
diff --git a/runtime/vue2/page/main.ts b/runtime/vue2/page/main.ts
index 624d829e..25d63af8 100644
--- a/runtime/vue2/page/main.ts
+++ b/runtime/vue2/page/main.ts
@@ -30,7 +30,10 @@ import { getLocalConfig } from './utils';
 
 Vue.use(request);
 
+const designWidth = document.documentElement.getBoundingClientRect().width;
+
 const app = new Core({
+  designWidth,
   config: ((getUrlParam('localPreview') ? getLocalConfig() : window.magicDSL) || [])[0] || {},
   curPage: getUrlParam('page'),
 });
diff --git a/runtime/vue2/playground/App.vue b/runtime/vue2/playground/App.vue
index 51455daa..2fdb9147 100644
--- a/runtime/vue2/playground/App.vue
+++ b/runtime/vue2/playground/App.vue
@@ -26,11 +26,16 @@ export default defineComponent({
       () => root.value?.items?.find((item: MNode) => item.id === curPageId.value) || root.value?.items?.[0],
     );
 
+    const designWidth = document.documentElement.getBoundingClientRect().width;
+
     const app = new Core({
+      designWidth,
       config: root.value,
       platform: 'editor',
     });
 
+    globalThis.appInstance = app;
+
     provide('app', app);
 
     watch(pageConfig, async () => {
diff --git a/runtime/vue3/page/main.ts b/runtime/vue3/page/main.ts
index 7e174f31..deb30939 100644
--- a/runtime/vue3/page/main.ts
+++ b/runtime/vue3/page/main.ts
@@ -43,7 +43,10 @@ Object.values(plugins).forEach((plugin: any) => {
   magicApp.use(plugin);
 });
 
+const designWidth = document.documentElement.getBoundingClientRect().width;
+
 const app = new Core({
+  designWidth,
   config: ((getUrlParam('localPreview') ? getLocalConfig() : window.magicDSL) || [])[0] || {},
   curPage: getUrlParam('page'),
 });
diff --git a/runtime/vue3/playground/App.vue b/runtime/vue3/playground/App.vue
index c5edd146..97c466e4 100644
--- a/runtime/vue3/playground/App.vue
+++ b/runtime/vue3/playground/App.vue
@@ -26,11 +26,15 @@ export default defineComponent({
       () => root.value?.items?.find((item: MNode) => item.id === curPageId.value) || root.value?.items?.[0],
     );
 
+    const designWidth = document.documentElement.getBoundingClientRect().width;
     const app = new Core({
+      designWidth,
       config: root.value,
       platform: 'editor',
     });
 
+    globalThis.appInstance = app;
+
     provide('app', app);
 
     watch(pageConfig, async () => {