我们做网页设计或想知道网页在手机上的样子时，不用真的拿手机打开，谷歌浏览器就能模拟各种设备的显示效果，查看网页在手机、平板上的布局和样式，方便又直观，特别适合需要跨设备查看的场景。
1. 用谷歌浏览器开发者工具模拟设备
打开要查看的网页，按 “F12” 打开开发者工具，点击左上角的手机图标（Toggle Device Toolbar），就进入了响应式布局模式。在顶部可以选择设备（比如 iPhone、iPad、安卓手机），也能自定义屏幕尺寸，网页会自动适应对应的宽度显示，就像在真实设备上一样，还能模拟触摸滑动。
2. 模拟不同屏幕方向和分辨率
在设备模拟模式里，点击 “旋转” 图标可以切换横屏 / 竖屏，看看网页在不同方向的显示效果；右侧可以调整屏幕分辨率（像素值），测试网页在各种尺寸下的适配情况。比如想知道网页在 720p 和 1080p 屏幕上的区别，在这里改一下分辨率就一目了然，不用找各种设备测试。
3. 保存常用设备配置，快速切换
经常需要查看某几种设备的效果？可以点击 “设备列表” 旁的 “编辑”，添加自定义设备（比如 “我的手机 - 375x812”），设置好分辨率、像素密度等参数，保存后下次点击就能直接切换到该设备模式，不用每次重新设置，适合需要频繁测试的用户。用谷歌浏览器查看响应式布局，不用来回切换设备，在电脑上就能搞定各种屏幕的显示效果，不管是做设计还是单纯好奇网页在手机上的样子，都特别方便，赶紧试试吧。
