OpenClaw 小屏适配需要从布局、交互和视觉等多方面进行调整，以下是一些关键策略

响应式布局方案

1 视口配置

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

2 断点设计

/* 移动端优先设计 */
@media (min-width: 640px) { /* 平板 */ }
@media (min-width: 1024px) { /* 桌面 */ }
/* 或桌面优先设计 */
@media (max-width: 1023px) { /* 平板 */ }
@media (max-width: 639px) { /* 手机 */ }

布局适配策略

1 弹性布局

.container {
  display: flex;
  flex-direction: column; /* 小屏时垂直排列 */
}
@media (min-width: 768px) {
  .container {
    flex-direction: row; /* 大屏时水平排列 */
  }
}

2 栅格系统调整

/* 小屏：单列显示 */
.grid-item {
  width: 100%;
  margin-bottom: 16px;
}
/* 大屏：多列显示 */
@media (min-width: 768px) {
  .grid-item {
    width: calc(50% - 8px);
    margin-bottom: 0;
  }
}

组件适配建议

1 导航菜单

// 移动端汉堡菜单
const MobileMenu = () => {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <>
      <button className="menu-toggle" onClick={() => setIsOpen(!isOpen)}>
        ☰
      </button>
      {isOpen && (
        <div className="mobile-menu">
          {/* 菜单内容 */}
        </div>
      )}
    </>
  );
};

2 表格组件

/* 表格在小屏上转换为卡片式 */
@media (max-width: 640px) {
  .responsive-table {
    display: block;
  }
  .responsive-table thead {
    display: none;
  }
  .responsive-table tr {
    display: block;
    margin-bottom: 1rem;
    border: 1px solid #ddd;
  }
  .responsive-table td {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem;
  }
  .responsive-table td::before {
    content: attr(data-label);
    font-weight: bold;
    margin-right: 1rem;
  }
}

交互优化

1 触摸友好设计

/* 最小触摸尺寸 */
.touch-element {
  min-height: 44px;
  min-width: 44px;
  padding: 12px;
}
/* 安全区域适配 */
.safe-area {
  padding-bottom: env(safe-area-inset-bottom);
}

2 手势支持

// 支持滑动手势
const useSwipe = (elementRef) => {
  useEffect(() => {
    const element = elementRef.current;
    let startX, startY;
    const handleTouchStart = (e) => {
      startX = e.touches[0].clientX;
      startY = e.touches[0].clientY;
    };
    const handleTouchEnd = (e) => {
      const endX = e.changedTouches[0].clientX;
      const endY = e.changedTouches[0].clientY;
      const diffX = startX - endX;
      const diffY = startY - endY;
      if (Math.abs(diffX) > Math.abs(diffY)) {
        // 水平滑动
        if (diffX > 50) onSwipeLeft();
        else if (diffX < -50) onSwipeRight();
      }
    };
    element.addEventListener('touchstart', handleTouchStart);
    element.addEventListener('touchend', handleTouchEnd);
    return () => {
      element.removeEventListener('touchstart', handleTouchStart);
      element.removeEventListener('touchend', handleTouchEnd);
    };
  }, []);
};

视觉优化

1 字体和间距

:root {
  /* 使用相对单位 */
  --font-size-base: 16px;
  --spacing-unit: 8px;
}
@media (max-width: 768px) {
  :root {
    --font-size-base: 14px;
    --spacing-unit: 6px;
  }
  /* 增加行高提升可读性 */
  p {
    line-height: 1.6;
  }
}

2 图标和按钮

/* 图标大小适配 */
.icon {
  width: 24px;
  height: 24px;
}
@media (max-width: 768px) {
  .icon {
    width: 20px;
    height: 20px;
  }
}
/* 按钮尺寸优化 */
.btn {
  padding: 12px 24px;
  border-radius: 8px;
}
@media (max-width: 768px) {
  .btn {
    padding: 10px 20px;
    border-radius: 6px;
  }
}

性能优化

1 按需加载

// 懒加载组件
const LazyComponent = lazy(() => import('./Component'));
// 图片懒加载
<img 
  src="placeholder.jpg" 
  data-src="image.jpg" 
  className="lazyload"
  alt=""
/>

2 资源优化

/* 小屏时加载小图 */
@media (max-width: 768px) {
  .hero-image {
    background-image: url('image-small.jpg');
  }
}
@media (min-width: 769px) {
  .hero-image {
    background-image: url('image-large.jpg');
  }
}

测试建议

1 设备测试

• 真机测试不同尺寸设备
• 测试横竖屏切换
• 测试不同系统（iOS/Android）

2 工具推荐

• Chrome DevTools 设备模拟
• Lighthouse 性能测试
• Responsively App 多设备同步测试

实用工具函数

// 判断设备类型
const useDevice = () => {
  const [isMobile, setIsMobile] = useState(false);
  useEffect(() => {
    const checkMobile = () => {
      setIsMobile(window.innerWidth <= 768);
    };
    checkMobile();
    window.addEventListener('resize', checkMobile);
    return () => window.removeEventListener('resize', checkMobile);
  }, []);
  return { isMobile };
};
// 使用示例
const { isMobile } = useDevice();
return (
  <div className={isMobile ? 'mobile-layout' : 'desktop-layout'}>
    {/* 内容 */}
  </div>
);

通过以上策略，可以有效实现 OpenClaw 的小屏适配，提升移动端用户体验，建议采用移动优先的设计思路,逐步增强到大屏体验。

标签： 小屏适配 调整策略