# 使用预览并检查不同屏幕尺寸

在预览中，你可以像应用用户一样点击按钮、填写表单，并切换桌面、平板和手机宽度检查布局。本文介绍如何试用主要页面、使用全屏预览，以及把发现的问题整理成修改需求。

## 开始前

打开已有生成版本的项目，查看顶部版本号，确认要检查的版本。如果任务还在生成，等保存完成后再试用。

本文使用“客户手记·工作室”的客户列表，示例记录为虚构资料。

## 切到预览模式并操作页面

1. 在画布工具栏选择 **预览**，开启页面按钮和表单的交互。
2. 从 **选择页面** 打开目标页面。
3. 试用该页的主要操作，例如搜索、筛选、打开记录和打开新增表单。

[![桌面画布处于预览模式，客户列表显示已有记录和搜索筛选入口。](https://ideamade.ai/help/zh/preview-desktop.jpg)](https://ideamade.ai/help/zh/preview-desktop.jpg)

_在预览中试用搜索、筛选和新增入口。_

详情页通常需要一条真实记录。直接在选择器中打开详情页，可能得到“客户不存在”等空态。先回到列表，再从已有客户的入口打开详情。

[![从列表打开林晓的详情页，页面显示对应客户资料。](https://ideamade.ai/help/zh/preview-record-open.jpg)](https://ideamade.ai/help/zh/preview-record-open.jpg)

_从列表中的客户打开详情，可以查看该客户的字段和相关操作。_

## 分别检查桌面、平板和手机

1. 选择 **桌面端**，检查主导航、列表和表单。
2. 选择 **平板**，观察导航折叠、内容换行和按钮位置。
3. 选择 **手机**，试用同样的操作，检查窄屏下的阅读和点击体验。

[![平板画布显示客户列表，布局使用更窄的可用空间。](https://ideamade.ai/help/zh/preview-tablet.jpg)](https://ideamade.ai/help/zh/preview-tablet.jpg)

_平板画布展示同一版本在较窄空间中的布局。_

[![手机画布中，旧版客户列表的筛选选项被截断，表格需要横向滚动。](https://ideamade.ai/help/zh/preview-mobile.jpg)](https://ideamade.ai/help/zh/preview-mobile.jpg)

_本例的手机画布中，筛选选项文字被截断，可以进一步要求调整换行。_

检查文字是否完整、按钮是否可点击、弹窗能否关闭、表格字段是否容易查看，以及筛选项是否齐全。涉及保存时，填写一条虚构记录，保存后重新打开，核对输入内容。

[![在手机画布中打开新增客户表单，查看输入区域及保存、取消入口。](https://ideamade.ai/help/zh/preview-mobile-form.jpg)](https://ideamade.ai/help/zh/preview-mobile-form.jpg)

_打开新增表单后，继续检查填写、提示和保存后的记录。_

## 使用全屏预览

选择工具栏的 **打开全屏预览**，在更大的画布里查看应用。全屏内仍可切换设备尺寸和预览／编辑模式；完成后选择 **关闭全屏预览** 返回工作台。

[![全屏预览中显示已有客户的详情，顶部保留设备尺寸和关闭入口。](https://ideamade.ai/help/zh/preview-fullscreen.jpg)](https://ideamade.ai/help/zh/preview-fullscreen.jpg)

_全屏模式提供更大的预览空间，适合查看页面布局和操作细节。_

## 把发现的问题变成具体修改

说明页面、尺寸、操作和实际现象，再描述期望结果。例如：

> 手机宽度下，客户列表的状态筛选选项被截断。请在空间不足时换行，保持全部选项可见，保留搜索与筛选逻辑。

按 [如何提出修改](https://ideamade.ai/zh/help/request-changes) 审阅方案，保存新版本后重新检查同一个场景。预览暂未显示最新结果时，使用画布工具栏的 **刷新**。进一步排查见 [处理预览无法打开或页面报错](https://ideamade.ai/zh/help/preview-troubleshooting)。

## 常见问题

### 在真实手机上还需要检查哪些内容？

可以检查触摸操作、键盘弹出后的布局、输入法和权限提示，并试用目标用户常用的浏览器。画布用于先检查不同宽度，真实设备能补充实际使用体验。

### 为什么点击按钮只出现组件高亮？

当前可能是编辑模式。切到预览模式后再试。

### 怎样把预览中的修改提供给线上用户？

完成检查后，发布当前编辑版本。具体步骤见[版本恢复与发布](https://ideamade.ai/zh/help/versions-and-publishing)。