OpenClaw 横竖屏适配通常涉及以下关键方面

基础配置

Android (AndroidManifest.xml)

<!-- 固定横屏 -->
<activity 
    android:name=".MainActivity"
    android:screenOrientation="landscape" />
<!-- 固定竖屏 -->
<activity 
    android:name=".MainActivity"
    android:screenOrientation="portrait" />
<!-- 自动旋转 -->
<activity 
    android:name=".MainActivity"
    android:screenOrientation="sensor" 
    android:configChanges="orientation|screenSize" />

iOS (Info.plist)

<!-- 支持所有方向 -->
<key>UISupportedInterfaceOrientations</key>
<array>
    <string>UIInterfaceOrientationPortrait</string>
    <string>UIInterfaceOrientationLandscapeLeft</string>
    <string>UIInterfaceOrientationLandscapeRight</string>
</array>

响应式布局方案

CSS/React Native 适配示例

/* 媒体查询适配 */
@media (orientation: portrait) {
  .container {
    flex-direction: column;
    padding: 20px;
  }
}
@media (orientation: landscape) {
  .container {
    flex-direction: row;
    padding: 10px;
  }
}
/* 使用 vh/vw 单位 */
.component {
  width: 90vw;  /* 视口宽度百分比 */
  height: 50vh; /* 视口高度百分比 */
}

React Native 方向监听

import { Dimensions, useWindowDimensions } from 'react-native';
// 方式1：Hook
function MyComponent() {
  const { width, height } = useWindowDimensions();
  const isPortrait = height > width;
  return (
    <View style={{
      flexDirection: isPortrait ? 'column' : 'row'
    }}>
      {/* 内容 */}
    </View>
  );
}
// 方式2：事件监听
Dimensions.addEventListener('change', ({ window, screen }) => {
  // 处理方向变化
});

Unity 游戏适配

Unity 屏幕方向设置

// 强制横屏
Screen.orientation = ScreenOrientation.LandscapeLeft;
// 自动旋转
Screen.orientation = ScreenOrientation.AutoRotation;
Screen.autorotateToLandscapeLeft = true;
Screen.autorotateToLandscapeRight = true;
Screen.autorotateToPortrait = false;
Screen.autorotateToPortraitUpsideDown = false;
// 适应不同宽高比
public class ScreenAdapter : MonoBehaviour
{
    void Start()
    {
        // 保持设计分辨率比例
        float targetAspect = 16f / 9f;
        float windowAspect = (float)Screen.width / Screen.height;
        float scaleHeight = windowAspect / targetAspect;
        Camera camera = GetComponent<Camera>();
        if (scaleHeight < 1.0f)
        {
            Rect rect = camera.rect;
            rect.width = 1.0f;
            rect.height = scaleHeight;
            rect.x = 0;
            rect.y = (1.0f - scaleHeight) / 2.0f;
            camera.rect = rect;
        }
    }
}

Web 适配方案

JavaScript 方向检测

// 检测方向变化
window.addEventListener("orientationchange", function() {
  const orientation = window.orientation;
  const isPortrait = Math.abs(orientation) === 0;
  // 调整布局
  document.body.classList.toggle('portrait', isPortrait);
  document.body.classList.toggle('landscape', !isPortrait);
});
// 或使用 CSS API
const portrait = window.matchMedia("(orientation: portrait)");
portrait.addListener((mq) => {
  if (mq.matches) {
    // 竖屏模式
  } else {
    // 横屏模式
  }
});

实际应用建议

横屏优先的游戏

1. 布局优化：重要UI元素放在屏幕两侧
2. 控制区域：虚拟摇杆放置在拇指自然位置
3. 信息显示：状态栏、分数等放在非操作区域

竖屏优先的应用

1. 单列布局垂直排列
2. 手势操作：适合单手操作的设计
3. 底部导航：关键功能在屏幕下方

测试要点

// 测试不同设备和方向
const testConfigurations = [
  { name: 'iPhone 竖屏', width: 375, height: 812 },
  { name: 'iPhone 横屏', width: 812, height: 375 },
  { name: 'iPad 竖屏', width: 768, height: 1024 },
  { name: 'iPad 横屏', width: 1024, height: 768 }
];

常见问题解决

1. 键盘弹出问题

   

   // 输入框获取焦点时调整布局
   const adjustForKeyboard = () => {
   if (window.visualViewport) {
    window.visualViewport.addEventListener('resize', resizeHandler);
   }
   };

2. 安全区域适配

   /* iOS 安全区域 */
   .safe-area {
   padding-top: env(safe-area-inset-top);
   padding-bottom: env(safe-area-inset-bottom);
   padding-left: env(safe-area-inset-left);
   padding-right: env(safe-area-inset-right);
   }

3. 性能优化

• 避免频繁的重布局
• 使用CSS transform代替位置改变
• 预加载横竖屏所需资源

根据OpenClaw的具体技术栈（Unity、React Native、Web等），选择相应的适配方案，关键是要在不同设备和方向上保持良好的用户体验。

标签： OpenClaw 横竖屏适配