脚本宝典收集整理的这篇文章主要介绍了html5教程-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教程,巧夺天工,精雕玉琢。小宝典献丑了!
以上是脚本宝典为你收集整理的html5教程-chrome浏览器调试手机端h5页面教程全部内容,希望文章能够帮你解决html5教程-chrome浏览器调试手机端h5页面教程所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。