针对 OpenClaw 的小屏适配，这里提供一套完整的解决方案

openclaw 中文openclaw 2026-04-09 2

技术方案选择

响应式布局框架

/* 基础响应式设置 */
.container {
  max-width: 100%;
  margin: 0 auto;
}
/* 使用 CSS Grid 或 Flexbox */
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}
@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr;
  }
}

Viewport 设置

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

移动端优化方案

布局适配

/* 移动端专用样式 */
@media (max-width: 480px) {
  /* 简化导航栏 */
  .navbar {
    padding: 8px 12px;
  }
  /* 按钮大小调整 */
  .btn {
    min-height: 44px;  /* 最小触摸区域 */
    padding: 10px 16px;
  }
  /* 输入框优化 */
  input, textarea {
    font-size: 16px;  /* 防止 iOS 缩放 */
  }
  /* 隐藏非必要元素 */
  .desktop-only {
    display: none;
  }
}

交互优化

// 触摸事件支持
document.addEventListener('touchstart', handleTouch, { passive: true });
// 防抖处理
const debounce = (func, wait) => {
  let timeout;
  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout);
      func(...args);
    };
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
};
// 滑动菜单
const drawerMenu = {
  init() {
    this.setupSwipe();
    this.setupTouchEvents();
  },
  setupSwipe() {
    let startX, startY;
    document.addEventListener('touchstart', (e) => {
      startX = e.touches[0].clientX;
      startY = e.touches[0].clientY;
    }, { passive: true });
    document.addEventListener('touchend', (e) => {
      const endX = e.changedTouches[0].clientX;
      const endY = e.changedTouches[0].clientY;
      const diffX = startX - endX;
      if (Math.abs(diffX) > 50) {
        // 处理滑动逻辑
        this.handleSwipe(diffX > 0 ? 'left' : 'right');
      }
    });
  }
};

性能优化

// 图片懒加载
const lazyLoad = {
  images: document.querySelectorAll('img[data-src]'),
  init() {
    if ('IntersectionObserver' in window) {
      const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            const img = entry.target;
            img.src = img.dataset.src;
            observer.unobserve(img);
          }
        });
      });
      this.images.forEach(img => observer.observe(img));
    }
  }
};
// 虚拟列表（长列表优化）
class VirtualList {
  constructor(container, items, itemHeight) {
    this.container = container;
    this.items = items;
    this.itemHeight = itemHeight;
    this.visibleItems = Math.ceil(container.clientHeight / itemHeight);
    this.render();
  }
  render() {
    // 只渲染可视区域内的元素
    // ...
  }
}

组件适配示例

表格组件适配

<!-- 移动端表格改造 -->
<div class="table-responsive">
  <table>
    <thead class="mobile-hidden">
      <!-- PC端表头 -->
    </thead>
    <tbody>
      <tr class="mobile-view">
        <td colspan="2">
          <div class="mobile-card">
            <div class="card-row">
              <span class="label">名称：</span>
              <span class="value">{{name}}</span>
            </div>
            <div class="card-row">
              <span class="label">状态：</span>
              <span class="value">{{status}}</span>
            </div>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

表单适配

/* 移动端表单样式 */
.mobile-form {
  .form-group {
    margin-bottom: 16px;
  }
  label {
    display: block;
    margin-bottom: 4px;
    font-weight: 500;
  }
  input, select, textarea {
    width: 100%;
    box-sizing: border-box;
  }
  /* 提交按钮固定底部 */
  .submit-area {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    padding: 12px;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
  }
}

实用工具类

/* 响应式工具类 */
.hide-on-mobile {
  @media (max-width: 768px) {
    display: none !important;
  }
}
.show-on-mobile {
  @media (min-width: 769px) {
    display: none !important;
  }
}
/* 安全区域适配 */
.safe-area-bottom {
  padding-bottom: env(safe-area-inset-bottom);
}
.safe-area-top {
  padding-top: env(safe-area-inset-top);
}
/* 字体大小适配 */
.text-scale {
  font-size: calc(14px + 0.5vw);
}
/* 网格系统 */
.mobile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}

测试方案

设备测试覆盖

// 设备检测
const deviceType = {
  isMobile: /Mobi|Android|iPhone/i.test(navigator.userAgent),
  isTablet: /Tablet|iPad/i.test(navigator.userAgent),
  getBreakpoint() {
    const width = window.innerWidth;
    if (width < 576) return 'xs';
    if (width < 768) return 'sm';
    if (width < 992) return 'md';
    if (width < 1200) return 'lg';
    return 'xl';
  }
};

响应式断点设计

// SCSS 断点管理
$breakpoints: (
  'xs': 0,
  'sm': 576px,
  'md': 768px,
  'lg': 992px,
  'xl': 1200px
);
@mixin respond-to($breakpoint) {
  @if map-has-key($breakpoints, $breakpoint) {
    @media (min-width: map-get($breakpoints, $breakpoint)) {
      @content;
    }
  } @else {
    @warn "Unknown breakpoint: #{$breakpoint}";
  }
}