OpenCLAW 的小屏适配主要针对移动端设备，以下是一些适配方案

openclaw openclaw解答 2026-04-09 2

视口设置

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

响应式布局方案

媒体查询适配

/* 通用移动端适配 */
@media screen and (max-width: 768px) {
  .openclaw-container {
    padding: 10px;
  }
  .sidebar {
    display: none; /* 小屏隐藏侧边栏 */
  }
  .content {
    width: 100%;
  }
}
/* 平板设备 */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .openclaw-container {
    padding: 15px;
  }
}

Flex/Grid 布局优化

.openclaw-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

触摸交互优化

/* 触摸友好按钮 */
.btn-mobile {
  min-height: 44px;
  min-width: 44px;
  padding: 12px 20px;
}
/* 增大可点击区域 */
.touch-target {
  padding: 12px;
  margin: 8px 0;
}

组件适配策略

导航菜单适配

// 移动端汉堡菜单
function initMobileMenu() {
  const menuToggle = document.querySelector('.menu-toggle');
  const navMenu = document.querySelector('.nav-menu');
  menuToggle.addEventListener('click', () => {
    navMenu.classList.toggle('active');
  });
}

表格优化

/* 响应式表格 */
.responsive-table {
  overflow-x: auto;
}
@media (max-width: 768px) {
  table {
    font-size: 14px;
  }
  td, th {
    padding: 8px 4px;
  }
}

字体和图标适配

/* 字体大小自适应 */
:root {
  --base-font-size: 14px;
}
@media (max-width: 768px) {
  :root {
    --base-font-size: 16px;
  }
  body {
    font-size: var(--base-font-size);
    line-height: 1.5;
  }
}
/* 图标大小适配 */
.icon {
  width: 24px;
  height: 24px;
}
@media (max-width: 768px) {
  .icon {
    width: 20px;
    height: 20px;
  }
}

实用适配工具类

/* 隐藏/显示控制 */
.hide-on-mobile {
  display: none;
}
.show-on-mobile {
  display: block;
}
@media (min-width: 769px) {
  .hide-on-mobile {
    display: block;
  }
  .show-on-mobile {
    display: none;
  }
}
/* 间距适配 */
.spacing-mobile {
  margin: 8px;
  padding: 8px;
}

JavaScript 检测与处理

// 设备检测
const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i
  .test(navigator.userAgent);
// 动态加载
if (isMobile) {
  // 加载移动端专用模块
  import('./mobile-module.js');
}
// 触摸事件处理
document.addEventListener('touchstart', handleTouchStart, {passive: true});
document.addEventListener('touchmove', handleTouchMove, {passive: true});

性能优化

/* 减少重绘 */
.mobile-optimize {
  will-change: transform;
  backface-visibility: hidden;
}
/* 图片优化 */
.responsive-img {
  max-width: 100%;
  height: auto;
}
/* 懒加载 */
.lazy-load {
  opacity: 0;
  transition: opacity 0.3s;
}
.lazy-loaded {
  opacity: 1;
}

调试工具

// 视口信息显示
function showViewportInfo() {
  console.log('视口宽度:', window.innerWidth);
  console.log('设备像素比:', window.devicePixelRatio);
  console.log('用户代理:', navigator.userAgent);
}