离线文本版 · Markdown 标记与示例按原文保留。
桌面浏览器缩窄窗口可以发现布局问题，却不能完全替代手机测试。触摸、软键盘、浏览器工具栏和真实网络，都可能改变页面行为。 <!-- more --> ## 先看内容能不能舒适阅读 检查正文是否必须放大、段落行距是否足够、标题是否被固定导航遮住。代码块可以内部滚动，但不应撑宽整个页面。图片需要保持比例，加载前最好预留空间，减少阅读时突然跳动。 ## 测试菜单和输入框 用手指打开导航，确认弹层能关闭、页面能继续滚动。点入文本框后观察键盘是否遮住按钮。输入框字体过小可能触发部分浏览器自动缩放，造成布局和操作体验变化。 ## 选择有代表性的页面 首页、长文章、分类列表和工具箱各测一个。下载需要确认触发的是文件，而不是把错误页面保存成 ZIP。长中文标题、英文 URL 和多列数据，都是容易暴露溢出问题的内容。 ## 区分模拟测试与真机结果 移动视口可检查断点，设备模拟可补充像素比和触摸行为，但仍不是物理设备。验收记录应写明机型、系统、浏览器和网络条件；没有实际测试的项目应明确保留，不写成全部通过。 ## 操作参考 ```text 建议记录： 视口或机型： 系统与浏览器： 菜单、输入、滚动、下载： 横向溢出与布局跳动： ``` 示例中的域名、文件名和地址需按实际环境替换。涉及生产配置时，先保留可恢复副本，再做修改。 ## 参考资料 - [官方文档与技术说明](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Responsive_Design) - [在线工具箱](/tools/) · [项目下载](/downloads/)