Chrome device mode 截图白屏问题

发表于 更新于 本文字数： 520 阅读时长 ≈ 1 分钟
本文是作者对Chrome device mode 截图白屏问题的介绍，包括Chrome device mode 截图白屏问题的优势、实现细节、相关资料等，这些步骤可以帮助作者提高Chrome device mode 截图白屏问题的效率。

测试网站或者制作移动网页截图，使用对应真机设备是一种方式，但在特定场景下也不免效率和成本偏高，Chrome浏览器自带的device mode可以完美模拟各种移动设备的分辨率，
另外还Chrome提供了截图功能。

问题

由于Chrome提供的设备毕竟有限，所以有时会需要添加自定义设备，但是最近在使用自定义设备，进行截图的时候，发现截图出来的是空白页面。

效果如下图
white screen

看了一遍自定义设备参数，对比测试，最终找到了原因，原来添加自定义设备这个时，Device pixel ratio这个参数是不能为空，否则即会出现截图为白屏即空白的情况。
如下图，我手动设定为1
custom device

关闭标签页，重新打开网页，按F12，点击设备模式，还是刚刚自定义的设备，点击截图，发现OK了。

is ok

说明

Device pixel ratio

devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。
在视网膜屏幕的iphone上，屏幕物理像素640像素，独立像素还是320像素，因此，devicePixelRatio等于2。

注意细节

修改了自定义设备参数，比如宽高等，刷新当前标签页是不起作用的，必须切换模拟设备或者关闭标签页，重新打开。