Chrome设备模拟需先点左上角手机图标启用设备工具栏，再选预设机型或自定义尺寸，注意UA变更需刷新页面生效，但触摸事件仍需真机验证。
直接用 Chrome 开发者工具的设备模拟器就能覆盖 90% 的日常测试需求，但真机验证仍是不可跳过的最后一步——尤其涉及触摸反馈、横竖屏切换和字体渲染差异时。
Chrome DevTools 设备模拟器怎么用才不漏断点
打开页面后按 F12 → 点击左上角 Toggle device toolbar（手机/平板图标）→ 选择预设设备（如 iPhone SE、Pixels 5）或手动拖动窗口宽度。关键不是“看起来像”，而是观察：@media 断点是否触发、.col-sm-6 类是否生效、导航栏是否折叠为汉堡菜单。注意：模拟器默认 UA 是移动端，但不会触发真实 touch 事件，所以滑动交互类功能得靠真机补测。
为什么有些手机上表格文字挤成一团
这不是屏幕小的问题，而是 Bootstrap 默认表格没做移动端适配。常见表现是横向滚动条消失、th 和 td 内容强制换行或溢出。解决路径有两条：
- 加
table-responsive包裹层，让表格可横向滚动（适合数据量少、列数不多的场景） - 用
bootstrap-table-mobile扩展，配置data-mobile-responsive="true"和data-min-width="576"，自动在小屏切卡片视图（适合字段多、需逐条阅读的业务表）
真机测试绕不开的三个实操细节
本地开发时，手机访问 localhost 是无效的。必须走局域网 IP：
- 查本机 IP：macOS/Linux 运行
ifconfig | grep "inet "，Windows 运行ipconfig，找 IPv4 地址（通常是192.168.x.x） - 确保开发服务器监听
0.0.0.0:端口（而非仅127.0.0.1），例如python3 -m http.server 8000 --bind 0.0.0.0:8000 - 手机浏览器访问
http://192.168.x.x:8000，再手动旋转屏幕——很多 bug 只在orientationchange时暴露，比如 flex 布局错位、vh单位计算异常
最易被忽略的是 viewport meta 标签是否写全：<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">。漏掉 shrink-to-fit=no 在 iOS Safari 上会导致缩放逻辑异常，尤其在表单输入时页面突然放大。这个细节不报错，但会让整套响应式失效得毫无征兆。
