小屏及超小屏测试：选浏览器手动缩放还是Chrome设备模拟？

Chrome 开发者工具的设备切换模拟结果，远比手动缩小浏览器窗口可靠，更贴近真实手机端的显示效果。

• 手动缩小浏览器窗口：本质还是在桌面端渲染环境下调整窗口宽度，完全不具备移动端渲染的核心特征：不会模拟移动端设备像素比（DPR）、不会切换移动端UA、不会触发移动端视口渲染规则，甚至拖动窗口时桌面端滚动条、窗口边框都会占用宽度，你看到的375px宽度实际渲染区域根本不准，Bootstrap的响应式断点触发时机本身就是错的。这种方式只能粗略看一下宽屏下的布局自适应，完全不能作为移动端效果的参考。
• Chrome 设备切换模拟（快捷键Ctrl+Shift+I打开开发者工具后点击设备切换按钮即可进入）：会完整模拟移动设备的核心渲染参数：包括精准匹配对应机型的逻辑分辨率、设备像素比、移动端视口规则、触摸事件逻辑、移动端User-Agent，不会有桌面端滚动条占位的误差，触发响应式断点的逻辑和真实手机完全一致。用来测试响应式布局的可信度远高于手动拖窗口。

你现在出现「手动缩窗口布局正常、设备模拟下布局错乱」的问题，90%以上的概率是你的HTML文件<head>标签里漏加了Bootstrap官方强制要求的视口声明：

<meta name="viewport" content="width=device-width, initial-scale=1">

没有这个标签的话，真实手机和Chrome设备模拟模式都会默认用980px左右的桌面宽度渲染页面，再整体缩放到手机屏幕宽度，根本不会触发中小屏幕对应的Bootstrap断点，布局自然和你预期不符；而手动缩窗口本身就是桌面渲染逻辑，不需要这个标签也能按窗口宽度触发断点，才会出现两种测试结果不一致的情况。

Chrome设备模拟也不是100%和真机完全一致，涉及字体渲染、硬件加速、原生API调用的细节可能存在细微差异，上线前最好找真实手机连接本地服务做最终验证，但在日常开发调试阶段，设备模拟是效率和准确率平衡最好的方案，完全可以替代手动缩窗口的测试方式。

内容的提问来源于stack exchange，提问作者User981636