chrome 适配调试_终于明白怎么用Chrome开发适配各种移动端屏幕尺寸了

都知道Chrome浏览器可以模拟真机尺寸，进行调试开发很方便，但是如果你的真机在预制的配置参数中没有，而且又不知道该输入什么尺寸参数，该怎么办？

(我就是遇到了这样的问题，折腾了好几个小时，终于弄清楚了)

1、首先如果不知道自己手头的设备的可视屏幕尺寸是多少，那么就在代码里写下以下这些代码

const screenWidth = document.body.clientWidth

const screenHeight = document.body.clientHeight

alert(`当前设备的屏幕尺寸(宽 x 高)：${screenWidth} x ${screenHeight}`)

然后在自己手头的移动设备上运行，显示出来，比如我的是华为P10,得到的宽高尺寸是：【360 x 573】(这个值单位暂时还不清楚，我还在测试中，一定要弄明白这个参数的单位到底是啥)

2、然后把得到的参数添加到Chrome浏览器的模拟真机参数中

image.png

image.png

image.png

3、最后我们除了可以在Chrome调试开发画面，最关键的是可以根据此参数，配合css3中的 @media 编写针对不同尺寸的移动设备的样式了

OK啦，这样一来就能在浏览器中调试开发了，不需要每次都到真机上运行查看效果了，非常方便，调试下来的最终画面效果一定与真机上的是一样的，注意这里我只说了画面，对于功能，还是要到真机上调试的噢！

(对了，这还有个好处，如果只是写画面，那么只需要去晚上找这个参数，如果找得到，那就不需要买真机了，前提你的应用对功能要求不高，只重视画面，否则还是最好买个真机来调试功能，不然会有你意想不到的功能bug等着你)