多设备尺寸视图模拟

为什么要多设备模拟

安卓手机的屏幕尺寸千差万别——从 5 英寸的小屏机到 7 英寸的大屏，同一个页面在不同屏幕上的布局可能完全不同。在 WebCat 上开发时如果只盯着自己手上那一台手机，容易写出只适配了一种尺寸的页面。

WebCat 的多设备视图

在预览窗口里，一般有一个设备切换按钮（可能是手机图标或下拉菜单），点了之后会弹出常见的设备尺寸预设，比如：

• 小屏手机（约 360×640）
• 普通手机（约 390×844，iPhone 13 尺寸）
• 大屏手机（约 412×915，Pixel 6 Pro 尺寸）
• 平板比例（约 768×1024）

选一个后预览窗口会变成对应的屏幕比例，页面自动按这个宽度重新布局。

模拟能做什么、不能做什么

能做的

• 布局响应式验证：CSS 媒体查询（@media）里写的断点切换是否正常
• 文本换行检查：不同宽度下标题和段落是否好看、有没有孤行
• 底部元素位置：按钮在窄屏上会不会挤出可见区域、是否需要调整

不能做的

• 真实的触摸体验：模拟视图只是按尺寸比例缩放，和真实设备的触摸反馈不一样
• 系统字体差异：不同安卓厂商的默认字体可能略有差异
• 实际性能：模拟预览跑的是同一款 WebView，性能差异体现不出来

模拟 ≠ 真机测试

多设备模拟是快速初筛工具——在手机上先过一遍不同尺寸，没问题了拿到电脑上或用云真机（如果有的话）做最终验证。尤其是复杂动画、大量 JS 交互的页面，模拟里看着流畅但换到真机上可能有性能差异。

常用断点建议

写响应式页面时建议覆盖这几个宽度：

WebCat 的多设备模拟预设一般覆盖前三个，平板模式可以手动调整尺寸或用自定义输入。