chrome浏览器调试手机端h5页面教程

这个是常识性的问题了。奈何我之前确实是不知道。只知道用F12来调试PC端的页面，这次经过同事指点，终于知道为啥人家在浏览器调试手机端页面，显示的大小都是手机端的。

步骤：

1、打开F12

2、如果所示点击

咱们平时寻找网页的DOM节点，都是用的第一个。

第二个就是专门用来调试手机端页面的。先点击这个按钮。

3、选择适配的手机型号

按照2操作点击之后，我们可以看到这个界面。箭头的位置是一个下拉选项框。可以通过这个选项框来选择要适配的手机型号。

4、最终页面展示

如图，我这里是选择的6p大小，所以在浏览器上显示的就是近似于6p手机大小的页面。这些基本操作，对前端同学来说简直不要太平常。但对于我这种前端渣，用这种方式是在是方便了太多。记录一下。

end

这个是常识性的问题了。奈何我之前确实是不知道。只知道用F12来调试PC端的页面，这次经过同事指点，终于知道为啥人家在浏览器调试手机端页面，显示的大小都是手机端的。

步骤：

1、打开F12

2、如果所示点击

咱们平时寻找网页的DOM节点，都是用的第一个。

第二个就是专门用来调试手机端页面的。先点击这个按钮。

3、选择适配的手机型号

按照2操作点击之后，我们可以看到这个界面。箭头的位置是一个下拉选项框。可以通过这个选项框来选择要适配的手机型号。

4、最终页面展示

如图，我这里是选择的6p大小，所以在浏览器上显示的就是近似于6p手机大小的页面。这些基本操作，对前端同学来说简直不要太平常。但对于我这种前端渣，用这种方式是在是方便了太多。记录一下。

end

觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！