对于 OpenClaw 项目的小屏适配（移动端适配）我们可以从以下几个方面进行系统性的优化

基础适配方案

响应式布局

/* 基础布局设置 */
.openclaw-container {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
/* 媒体查询适配 */
@media screen and (max-width: 768px) {
  /* 平板适配 */
  .openclaw-container {
    padding: 12px;
  }
}
@media screen and (max-width: 480px) {
  /* 手机适配 */
  .openclaw-container {
    padding: 8px;
  }
}

弹性布局方案

/* 使用Flexbox */
.openclaw-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
/* 移动端调整 */
@media (max-width: 768px) {
  .openclaw-wrapper {
    flex-direction: column-reverse; /* 可能需要调整布局顺序 */
  }
  .sidebar {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: auto;
  }
}

具体组件适配

导航菜单适配

/* 桌面端导航 */
.desktop-nav {
  display: flex;
  gap: 20px;
}
/* 移动端汉堡菜单 */
@media (max-width: 768px) {
  .desktop-nav {
    display: none;
  }
  .mobile-menu-btn {
    display: block;
  }
  .mobile-nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 70%;
    height: 100vh;
    transition: right 0.3s ease;
  }
  .mobile-nav.active {
    right: 0;
  }
}

表格适配

/* 响应式表格 */
.openclaw-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 768px) {
  /* 表格转为卡片式 */
  .table-row {
    display: block;
    margin-bottom: 16px;
    border: 1px solid #eaeaea;
    border-radius: 8px;
  }
  .table-cell {
    display: flex;
    justify-content: space-between;
    padding: 12px;
    border-bottom: 1px solid #f0f0f0;
  }
  .table-cell:last-child {
    border-bottom: none;
  }
  .table-cell::before {
    content: attr(data-label);
    font-weight: bold;
    margin-right: 12px;
  }
}

表单适配

/* 表单元素适配 */
.openclaw-form {
  width: 100%;
}
.form-group {
  margin-bottom: 16px;
}
.form-control {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 12px;
  font-size: 16px; /* 防止iOS缩放 */
}
@media (max-width: 480px) {
  .form-row {
    flex-direction: column;
  }
  .form-col {
    width: 100%;
    margin-bottom: 12px;
  }
}

交互体验优化

触摸友好设计

/* 触摸目标大小 */
.touch-button {
  min-height: 44px;
  min-width: 44px;
  padding: 12px 20px;
}
/* 优化滚动 */
.scroll-container {
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
}
/* 防止文本缩放 */
body {
  -webkit-text-size-adjust: 100%;
}

手势操作支持

// 滑动手势支持
let touchStartX = 0;
let touchEndX = 0;
element.addEventListener('touchstart', e => {
  touchStartX = e.changedTouches[0].screenX;
});
element.addEventListener('touchend', e => {
  touchEndX = e.changedTouches[0].screenX;
  handleSwipe();
});
function handleSwipe() {
  const diff = touchStartX - touchEndX;
  if (Math.abs(diff) > 50) {
    // 执行滑动操作
  }
}

性能优化

图片和媒体适配

/* 响应式图片 */
.responsive-img {
  max-width: 100%;
  height: auto;
}
/* 根据DPR加载不同图片 */
@media 
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
  .logo {
    background-image: url('logo@2x.png');
  }
}

按需加载

// 移动端按需加载组件
if (window.innerWidth < 768) {
  import('./mobile-components.js').then(module => {
    // 加载移动端专用组件
  });
}

实用工具类

/* 响应式工具类 */
.hide-on-mobile {
  display: block;
}
.show-on-mobile {
  display: none;
}
@media (max-width: 768px) {
  .hide-on-mobile {
    display: none;
  }
  .show-on-mobile {
    display: block;
  }
}
/* 文本适配 */
.text-responsive {
  font-size: clamp(14px, 2vw, 18px);
  line-height: 1.5;
}
/* 间距适配 */
.spacing-responsive {
  padding: clamp(8px, 2vw, 16px);
}

测试建议

1. 真机测试：使用真实设备测试
2. 网络环境：测试3G/4G环境下的加载
3. 手势测试：确保所有手势操作可用
4. 输入测试：测试虚拟键盘的影响
5. 横竖屏切换：测试方向变化时的布局

注意事项

1. 字体大小：最小字体不小于12px
2. 点击延迟：使用fastclick或touch-action
3. 视口设置：确保正确的viewport

   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

4. 安全区域：考虑iPhone X+的刘海屏

   .safe-area {
   padding-bottom: env(safe-area-inset-bottom);
   }

根据OpenClaw的具体功能模块，可以选择性地应用这些适配方案,关键是要保持移动端的操作简便性和信息的可读性。

标签： 移动端适配 系统性优化