diff --git a/examples/sites/playground/App.vue b/examples/sites/playground/App.vue
index 0d5c0c6cb5..22f30ec9d5 100644
--- a/examples/sites/playground/App.vue
+++ b/examples/sites/playground/App.vue
@@ -12,7 +12,7 @@ import GitHub from './icons/Github.vue'
 import Share from './icons/Share.vue'
 
 const VERSION = 'tiny-vue-version-3.19'
-const NOTIFY = 'tiny-vue-playground-notify'
+const NOTIFY_KEY = 'tiny-vue-playground-notify'
 const LAYOUT = 'playground-layout'
 const LAYOUT_REVERSE = 'playground-layout-reverse'
 
@@ -41,10 +41,10 @@ const fileDelimiter = cdnHost.includes('npmmirror') ? 'files/' : ''
 
 let notify
 const showNotify = () => {
-  if (localStorage.getItem(NOTIFY) !== 'true' && !notify) {
+  if (localStorage.getItem(NOTIFY_KEY) !== 'true' && !notify) {
     const muteNotify = () => {
       notify.close()
-      localStorage.setItem(NOTIFY, true)
+      localStorage.setItem(NOTIFY_KEY, true)
     }
     notify = Notify({
       type: 'info',
@@ -288,9 +288,9 @@ function share() {
 
 <template>
   <div class="header">
-    <div class="title"><img class="logo" :src="logoUrl" /> <span>OpenTiny Vue 演练场</span></div>
+    <div class="title"><img class="logo" :src="logoUrl" /> <span class="mobile-hide">OpenTiny Vue 演练场</span></div>
     <div>
-      <span class="ml20">
+      <span class="ml20 mobile-hide">
         布局方向:
         <tiny-button-group
           :data="state.layoutOptions"
@@ -298,12 +298,12 @@ function share() {
           @change="changeLayout"
         ></tiny-button-group>
       </span>
-      <span class="ml20">
+      <span class="ml20 mobile-hide">
         布局反转:
         <tiny-switch v-model="state.layoutReverse" mini @change="changeReserve"></tiny-switch>
       </span>
       <span class="ml20">
-        OpenTiny Vue 版本:
+        <span class="mobile-hide">OpenTiny Vue 版本: </span>
         <tiny-select
           v-model="state.selectVersion"
           style="width: 150px"
@@ -336,6 +336,12 @@ function share() {
   box-sizing: border-box;
 }
 
+/** 小屏幕时隐藏 */
+@media screen and (max-width: 640px) {
+  .mobile-hide {
+    display: none;
+  }
+}
 #header {
   display: none;
 }
diff --git a/examples/sites/src/views/components/components.vue b/examples/sites/src/views/components/components.vue
index ffe6be37ee..1dc57a6627 100644
--- a/examples/sites/src/views/components/components.vue
+++ b/examples/sites/src/views/components/components.vue
@@ -816,7 +816,6 @@ export default defineComponent({
     flex: 1;
     display: flex;
     justify-content: center;
-    min-width: 680px;
     padding: 0 40px;
   }
 
@@ -837,7 +836,6 @@ export default defineComponent({
 
     :deep(> .tiny-tabs__header) {
       position: sticky;
-      top: 90px;
       z-index: var(--docs-tabs-header-zindex);
       background-color: #fff;
 
@@ -974,6 +972,10 @@ export default defineComponent({
   column-gap: 16px;
 }
 
+.docs-content-main {
+  overflow: auto;
+}
+
 .cmp-container {
   p {
     font-size: 16px;
diff --git a/examples/sites/src/views/layout/layout.vue b/examples/sites/src/views/layout/layout.vue
index 40c8c54d8f..d914eb795e 100644
--- a/examples/sites/src/views/layout/layout.vue
+++ b/examples/sites/src/views/layout/layout.vue
@@ -196,9 +196,12 @@ export default defineComponent({
 .content-layout {
   display: flex;
   --layout-tree-menu-input-height: 32px;
-  --layout-content-main-min-width: 600px;
+  --layout-content-main-min-width: 200px;
   --layout-content-main-max-width: 1000px;
 }
+@media screen and (max-width: 640px) {
+  --layout-content-main-min-width: 600px;
+}
 
 .tiny-tooltip.tiny-tooltip__popper.is-light.docs-tooltip {
   border: none;