使用Chrome开发者工具模拟各种设备

一个受不同人都欢迎的网页，不仅仅要考虑各种大小的屏幕，比如14寸、17寸、23寸及更大的桌面显示器，也要考虑各种移动设备如手机、平板电脑的屏幕。也就是说，要做一个响应式的页面，要能在不同大小的窗口上都要适配没问题才行。

手动调整浏览器的窗口测试太麻烦，利用Chrome自带的显示模式切换功能就方便多了。点下图中的手机/平板图标来打开/关闭这个功能（开启时是蓝色，关闭时是灰色）：

可以看到，Chrome里内置了一些手机、平板的屏幕尺寸，比如Galaxy S5、Pixel系列和iPhone、iPad等。选择每一个设备，都能立刻看到真实的效果。

使用设备模式，可以做到：

• 在不同的屏幕尺寸和分辨率，包括Retina显示屏，上模拟您的网站。

• 通过可视化和检查CSS媒体查询进行响应式设计。

• 使用网络模拟器评估网站的性能，而不会影响其他标签的流量。

• 准确地模拟触摸事件，地理位置和设备方向的设备输入。

这个功能仅仅是模拟设备的尺寸等，并不能模拟这个设备上的浏览器的特性。由于移动端浏览器和桌面浏览器的功能特性上有些差异，因此，桌面浏览器上如果用到了Chrome某些很新的特性，可能在移动端设备上是会有问题的，还需要在具体的设备上测试才行。

除了设备模式，还有另外两个菜单：

Edit

选择这个菜单，还可以看到另外几十个不太常用的设备，还可以自定义设备。

Responsive

如果只是想看不同大小的窗口的效果，不想切换设备，可以选择Responsive, 这样在页面内就有一个拖拽条可以更方便地调整网页显示窗口的大小了。如下图显示：