必须在预览阶段主动触发响应式测试：点击【立即预览】→确认“预览模式”→选iPhone SE（3rd）或Galaxy S22→检查导航栏、按钮、表单、卡片布局→截图比对真机效果。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
要在码上飞AI生成的应用中确认小屏幕设备（如iPhone SE、安卓中端机型）能否正常显示页面布局、按钮可点、文字不溢出，必须在预览阶段主动触发响应式测试，不能依赖默认视图。
进入应用预览界面
在码上飞AI完成开发并弹出“应用已生成”提示后，点击【立即预览】按钮，不要直接跳转发布或下载。
等待页面加载完成，确保左上角显示“预览模式”且右下角有悬浮的设备切换控件——若未出现，说明当前仍处于编辑态，需先点击右上角“保存并预览”再重试。
手动切换小屏设备类型
点击预览界面右下角的设备图标（形状类似手机轮廓），打开设备列表。
从列表中选择明确标注为小屏的型号：优先选 【iPhone SE（3rd）】 或 【Galaxy S22】，不要选“响应式”或“自定义尺寸”，它们无法真实模拟窄 viewport 下的 CSS 断点行为。
选中后页面会自动刷新并缩放至对应分辨率，此时地址栏右侧应显示当前宽度数值（如 375px 或 412px），这是验证是否真正切入小屏模式的关键信号。
逐项检查核心交互区域
第一步：滚动到首页顶部导航栏，确认 Logo 和菜单文字未被截断、图标未错位、返回按钮完整可见；若出现省略号（…）或图标塌陷，说明 flex 布局未适配最小宽度。
第二步：找到主操作按钮（如“立即预约”“提交需求”），用鼠标悬停或真机轻点，观察按钮是否全宽撑满、文字是否换行、点击反馈动效是否触发——小屏下按钮高度低于44px将导致iOS系统判定为不可触控区域。
第三步：打开任意含表单的页面（如用户注册页），点击输入框，确认软键盘弹出后页面未整体上移遮挡标题、提交按钮未被顶出可视区；若发生此问题，需在后续调整中启用“viewport-fit=cover”声明。
第四步：横向滑动查看所有卡片/列表项，确认最后一项右侧无空白缺口、圆角未被裁切、阴影未消失——这表示 container 的 max-width 和 padding 在小屏下未被重置。
导出小屏截图用于比对
点击预览界面右上角“截图”按钮，选择“当前视口”，保存 PNG 文件。
立即用手机浏览器访问该截图链接，真机打开对比：若网页版截图中文字清晰、按钮居中、无横向滚动条，而手机实测出现文字挤压或按钮错位，说明码上飞生成的 CSS 媒体查询未覆盖 target-densitydpi 场景，需在“高级设置→前端兼容”中手动开启 legacy viewport 支持。
