---
lastModified: 2026-10-10
type: feature
title: "面向店铺团队的响应式网站测试"
description: "在 Runner AI 中用桌面、平板和手机预览检查店铺页面，围绕具体顾客操作发现布局问题。提供页面路径、操作步骤和预期结果，检查保存后的修改，再决定是否发布。预览适合做第一轮布局检查，不代表所有浏览器、真实设备或购买流程都已验证；触屏、手机键盘、支付和其他连接系统仍需单独检查。"
category: ai-websites
h1: "发布店铺前，先做响应式网站测试"
keyword: "响应式网站测试"
legacyKind: structured
---

Runner AI 的**响应式网站测试**从当前店铺和一项具体顾客操作开始。切换桌面、平板和手机预览，检查同一个页面，再用页面路径和预期结果描述问题。你得到的是可以检查的店铺项目修改，而不是用一个设备预设证明所有浏览器或购买流程都正常。

## 从一项顾客操作开始响应式网站测试

先选页面路径，再选顾客应该完成的操作。商品页可以检查选择可售规格并进入购物车；集合页可以检查筛选面板是否遮住商品结果。使用真实商品目录和已批准的内容，让测试覆盖顾客实际会看到的长标题和图片。

开始前记下预期结果，以及必须保持不变的店铺部分。说明受影响的控件和出现问题的预览模式。不要为了让布局看起来正常，把长商品名替换成短示例。[AI 移动店铺搭建器](/zh/ai-ecommerce-mobile-store-builder)介绍前期设计工作。本页侧重检查现有店铺，并提出范围明确的修改请求。

## 对比桌面、平板和手机预览

Runner AI 店铺预览提供三种视口选择。桌面使用可用预览区域，平板和手机使用固定框架。切换框架改变的是预览空间，并不会创建另一个店铺项目。这样可以观察相同内容在较窄布局中的排列变化。

从页面标题一直检查到最后一个操作。注意文字截断、图片裁切后看不清商品、按钮重叠以及横向滚动。也要实际打开菜单、使用控件；按钮能显示，不等于下一步状态能正常打开。每个视口都重复相同操作，才能对比结果。这些框架只是第一轮检查，不是真实设备模拟器，也不覆盖所有浏览器。涉及触屏、手机键盘或支付界面的任务，还需要单独测试其他宽度和真实设备。

## 把布局问题写成具体修改请求

可复现的报告应包含页面路径、视口、起始状态、操作、预期结果和实际结果。截图可以展示重叠，但还要说明它阻碍了哪项顾客操作。例如，报告手机预览中的规格列表遮住了加入购物车按钮，而不是要求重做整个商品页。

将这个有限范围的任务交给 Runner AI，同时提供已核实的商品信息、已批准的文案和品牌规则。要求保留无关部分，并返回受影响的源文件修改供检查。[AI 网站编辑器](/zh/ai-website-editor)介绍编辑流程，以及 Design Mode 可用时针对所选元素提出请求的方法。保存后，等更新的预览准备好，先复测原来的问题，再检查另外两种视口。手机上的修复可能改变桌面间距或平板控件的位置。

## 检查结果后再决定发布

预览通过，只能说明你检查过的场景符合预期。确认打开了正确页面、重要内容没有丢失、操作到达了预期状态。查看当前版本，不要假设旧截图代表最新修改。如果页面依赖库存、搜索或购物车数据，还要到负责这些数据的系统中核实。

发布仍是单独的决定。响应式布局正常，并不证明支付方式、运费、税费或分析系统正常。购买测试应在获得授权的测试环境中进行；高风险移动操作需要用真实手机验证。[现代网站设计](/zh/modern-website-design)介绍更大范围的导航和页面结构调整。保留未解决问题的记录，不要把一次视觉检查当成完整上线批准。每次修改后，都围绕同一顾客操作复测。

## 常见问题

### 修复布局时应该给 Runner AI 哪些信息？

提供当前店铺、页面路径、视口、起始状态、操作和预期结果。说明实际问题，必要时附上截图。补充已核实的商品信息，以及必须保持不变的部分。响应式网站测试需要可观察的通过条件，而不是笼统地要求页面更好看。

### 手机预览能代替真实手机测试吗？

不能。手机框架便于检查布局，但不会复现每一种真实设备或移动浏览器。触屏、键盘、方向变化、浏览器界面或支付控件重要时，应在真实设备上验证关键任务。预览是前期检查的一层，不是设备认证或性能测量。

### 检查预览会发布我的修改吗？

不会。检查预览和选择发布是不同步骤。先在桌面、平板和手机布局中查看已保存的修改，再验证顾客操作及连接系统。布局检查通过只确认你观察过的场景，并不能证明所有店铺路径和购买条件都已准备好。

[查看 Runner AI 全部功能](/zh)