在电脑端浏览器模拟手机浏览器查看网页源代码或UI外观的方法_慢熊科技

网站的手机端的UI显示逐步比PC电脑端的UI更加重要,我们网站建设者在日常制作网页UI外观时候,经常需要在电脑端模拟手机浏览器去查看网页的源代码或者通过浏览器的审查元素去调试当前网页UI外观,这个方法是非常实用的。 我们在网页制作的过程中,针对网站适应形式,这里姑且分为自适应形式和手机版独立网页模板的形式。在电脑端查看自适应的网页模板的源代码或审查元素都非常简单,只需要手动调整你的电脑端浏览器的窗口大小,即可实现网页模板自适应的转变,当转变到你需要的样子之后,在网页上右键然后点击审查元素即可。
模拟手机浏览器查看源代码或浏览器审查元素
那么,针对非自适应而实用独立网页模板,在无法用手机右键或者F12键操作的情况下,我们如何看他的源代码呢?慢熊自媒体在网上收集了几种方法,但是都是说到了门口,却没有为读者真正的打开大门。
以下我们以搜狗浏览器为例开始操作:
1.在你的PC电脑端浏览器上打开你所需要查看的网页UI外观,注意需要将浏览器切换到极速模式,如果是兼容模式则无法下一步。极速/兼容模式的切换在你的浏览器的地址栏的最右侧,直接点击e图标即可
2.在当前网页上按F12或者鼠标右键点击“审查元素”,这个时候网页源代码就会出来,搜狗浏览器在下方,其他浏览器可能在左侧(这个是可调节的)。
3.如下图所示,在上一步点开审查元素之后,在审查元素框的左上角(有的浏览器是右上角),按图所示点击圆圈所示图标。点击之后浏览器的视效渲染内核会从电脑端切换成手机端。
设置浏览器手机与电脑的UI
点击之后会出现下图所示的内容:
错误示范

在网上搜索这个问题很多网页会提供方法,但是很遗憾的是这些方法到此之后就结束了,而实际上现在的浏览器(2018)版本只按照上面的方法是无法实现我们在电脑端看源代码和UI外观的。这里慢熊自媒体加了一步,来更好的实现我们需要的效果:
4.按F5刷新一下,就会出现如下画面,也就是我们想要的网页在手机端所显示的UI外观,当然也可以右键看源代码了。
手机端所显示的UI网页外观
就是这么神奇。以上就是在电脑端浏览器模拟手机浏览器查看网页源代码或UI外观的方法。
珠海
2018.5.23