qoder通过quest mode、小程序扩展和pwa折叠屏适配三步实现全端响应：①新建项目时自动注入css容器查询与动态字体/触摸目标规则；②复用react状态逻辑迁移至微信小程序ui层；③生成pwa离线包并配置viewport-fit=cover适配折叠屏。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
你想让Qoder生成的全栈项目同时在桌面浏览器、平板和手机上正常显示与交互，但发现默认输出的React或Vue前端只适配单一视口，页面在小屏上文字挤成一团、按钮无法点击、导航栏错位——这说明项目缺少跨端渲染策略与设备上下文感知能力。
用Quest Mode自动注入响应式骨架
此方式适用于从零启动新项目，Qoder会根据你声明的“多端”意图，主动选择适配方案并写入构建配置，避免后期手动补丁导致样式层与逻辑层脱节。
第一步：打开Qoder桌面端，点击右上角“Quest”按钮进入独立控制台视图。
第二步：在左栏点击“新建Quest”，输入指令：“创建一个支持桌面/平板/手机三端自适应的React 18 + TypeScript全栈项目，前端使用Vite构建，要求：①根容器基于CSS Container Queries实现布局断点；②字体大小随视口缩放但不低于14px；③触摸目标最小尺寸44×44px；④禁用固定viewport width=device-width硬编码。”
第三步：等待Qoder自动识别“三端”关键词后调用Layout Agent，该Agent将跳过传统media query路径，直接在vite.config.ts中注入containerQueries插件，并在src/index.css顶层声明@container (min-width: 768px)规则集。这一步不能跳过，否则后续组件无法响应容器尺寸变化。
第四步：确认右栏“Changed Files”中出现vite.config.ts、src/index.css、src/App.tsx三处修改，点击“Accept”同步至本地。此时项目已具备容器级响应能力，无需再手动添加rem或vw单位。
为现有项目追加小程序端适配
如果你已有Web项目想扩展微信小程序形态，Qoder不推荐重写整套UI，而是通过语义映射复用核心逻辑，仅替换渲染层。
代码编辑 CLI 工具集合：Cursor CLI（agent）和 Qoder CLI（qodercli），用于代码修改、重构、Code Review 及自动化代码任务。
方法一：在Qoder IDE中打开项目根目录 → 右键project.config.json → 选择“Extend to MiniProgram” → 输入：“将当前React前端逻辑迁移至微信小程序，保留所有业务状态管理（如useTodoStore），但UI层改用WXML+WXSS，适配iOS/Android双端安全区，底部TabBar需兼容iPhone X及以上刘海屏。”
方法二：执行命令行指令qoder extend --target miniprogram --bridge react-store，Qoder将自动分析src/stores下的Zustand或Jotai状态定义，生成pages/index/index.js中对应的Page.setData调用链，并在app.json中插入requiredBackgroundModes: ["audio"]等小程序特有字段。
【注意】必须确保原项目store导出为具名函数而非default export，否则Qoder无法静态解析状态结构
一键生成PWA离线包并适配折叠屏
当项目需在Chrome OS折叠屏笔记本、Surface Duo等设备上展开/合拢时保持功能完整，Qoder通过PWA Manifest与CSS环境查询双重保障实现无缝切换。
在项目根目录终端运行：qoder pwa --foldable --manifest-icon-size=192,512
Qoder将立即生成public/manifest.json，其中display_override字段设为["window-controls-overlay","minimal-ui"]，并自动在src/main.ts中注册Service Worker，拦截所有GET请求缓存HTML/CSS/JS资源。
关键动作是向index.html的
注入：。这个viewport-fit=cover声明决定了折叠屏合拢时内容是否被系统UI裁剪——漏掉它会导致半屏状态下顶部状态栏遮挡关键操作按钮。
