怎样预览手机尺寸的网页？用 390px 找出布局问题

桌面看起来正常的网页，缩窄后可能出现文字溢出、按钮挤压、输入框超出边界。手机尺寸预览的作用是提前发现这些布局问题。本教程沿用每日计划示例，比较宽屏与 390px 两种宽度；它不模拟真实手机性能、系统权限、触摸键盘或浏览器内核。

准备一个可重复检查的页面

下载并导入下方三个文件，或打开工作台中的教程示例。先在桌面预览中确认能勾选和添加任务。再把标题改成“我的学习与生活计划”，并新增一个较长任务：“整理本周学习笔记，记录三个需要继续练习的问题”。长内容比短占位文字更容易暴露布局问题。

切换手机宽度

1. 在项目预览上方找到“桌面预览”选择框，切换为“手机预览”。工作台将预览框宽度设为 390px。
2. 观察标题是否自然换行，输入框是否仍完整显示，添加按钮是否位于输入框下方。
3. 滚动到长任务，确认文字在卡片内换行，复选框没有被挤出可点击区域。
4. 在手机预览里勾选一项，再添加一项，确认变窄后交互仍可使用。
5. 切回桌面预览，检查输入框和按钮恢复为同一行。

这段 CSS 为什么有用

@media (max-width: 480px) {
  .app { margin: 12px; padding: 20px; }
  .entry { flex-direction: column; }
  .entry button { width: 100%; }
}

宽度不超过 480px 时，表单由左右排列改为上下排列。这样按钮不再与输入框争抢横向空间。示例同时使用 box-sizing: border-box，使内边距计入元素宽度。你可以把断点改成 420px，运行后分别比较桌面与手机预览，观察规则何时生效。

四项具体检查

• 阅读：标题、说明和错误文字不被截断，长中文和英文都能换行。
• 操作：按钮文字完整，复选框旁的标签可以点击，焦点边框看得见。
• 宽度：页面内容不需要左右拖动才能读完。不要单纯用隐藏溢出来遮住超宽内容。
• 状态：输入长文字、勾选任务、列表变长后布局仍正常，而不是只检查初始状态。

不要把预览当作设备测试结论

工作台所在窗口太窄时，预览框还会受到父容器宽度限制，因此“手机预览”不代表每次都精确模拟一台 390px 的手机。导出后仍应在实际手机浏览器打开部署页面，检查键盘弹出、滚动、字体和触摸操作。当前示例没有图片加载或网络请求；真实项目增加这些内容后，需要重新验证。

完成标准

两种预览下都能添加和完成任务；长标题与长任务没有溢出；按钮可读且可操作。完成这些检查后，再导出你的项目，避免把桌面效果误当作完整移动体验。