多设备自适应演示

Responsive Toy Lab

Toy 应该跟着设备一起变形

这个演示 Toy 会读取当前视口和输入能力，并把同一个互动内容切换成手机、平板、PC 三种布局。它不是一张说明图，而是一份可以被点击、拖拽、下载、交给 Agent 继续执行的参考样例。

视口 计算中
布局档位 计算中
输入能力 计算中
容器提示 计算中

自动档会跟随真实窗口变化；手动档用于在同一台设备上预览其他消费者看到的形态。

正在读取运行环境
PC 浏览器布局
同一个 Toy 核心 键盘优先
顶部安全区
底部安全区
目标区
T

PC 档隐藏虚拟摇杆，展示键盘操作；手机和平板档保留大触摸按钮。

这个 Toy 正在演示的原则

1

布局看视口

页面根据宽度切换单栏、双栏、三栏，并给核心互动区域稳定尺寸，避免内容被挤压。

2

交互看输入

触摸环境给大按钮和虚拟方向键，PC 环境给键盘提示，游戏逻辑保持同一套。

3

容器留安全区

手机档展示顶部和底部安全区，页面使用动态视口和安全区变量处理 App 内外差异。

4

文档可交付

完整 MD 作为 Toy 的一部分呈现，并提供下载链接和 Agent 可执行的读取指令。

兼容情况矩阵

访问环境 布局策略 输入策略 检查重点
手机端 B站 App 内 单列，底部操作区，核心内容优先。 触摸按钮、虚拟方向键，避免 hover。 顶部栏、底部安全区、分享入口返回后状态。
手机浏览器 单列，使用 `100dvh` 处理地址栏高度变化。 触摸优先，按钮不小于 44px。 地址栏展开收起、横竖屏切换、横向滚动。
平板 双栏或大单栏，横屏展示更多辅助信息。 触摸为主，可兼容外接键盘。 不要直接套手机布局，也不要过度压缩信息。
PC 浏览器 三栏或宽画布，限制最大内容宽度。 鼠标、键盘、悬浮反馈，隐藏虚拟摇杆。 快捷键、滚轮、拖拽、超宽屏可读性。

完整 MD 参考

下面渲染的是随 Toy 一起分发的 toy-responsive-guide.md。下载按钮适合人类直接保存，复制指令适合发给 Agent 继续改造或检查其他 Toy。 


              

              
            


            

              
正在加载 Markdown 文档。