专注WP
建站技术分享

如何在电脑查看网站在安卓手机,苹果手机及iPad端页面模拟的预览效果

办公人导航

在我们网站配置调试的时候可能会经常需要查看手机端和电脑端的显示效果,比如添加广告查看显示效果、或者查看文章显示效果等,有时来回看手机电脑,部分站长可能会觉得有点麻烦,那怎么样可以在电脑端打开网页就预览手机端的显示效果呢?

其实要实现在电脑端预览手机端的效果非常简单,只要浏览器是Chrome内核的均可以直接预览手机端的效果,比如常见的浏览器谷歌浏览器,360浏览器,QQ浏览器,Opera 浏览器等。

具体查看方法,我们只要打开浏览器开发人员工具就可以预览网站的手机端效果。打开浏览器开发人员工具的方法,在打开网站网页按F12或者在需要预览的网站网页右击审查元素(谷歌浏览器是右击检查)或者你也可以在浏览器功能中找到开发人员工具打开。

如何在电脑查看网站在安卓手机,苹果手机及iPad端页面模拟的预览效果插图

下面WordPress站长圈以360浏览器打开预览WordPress站长圈网站手机端iPad端的效果为例。

1.首先是在360浏览器打开WordPress站长圈网站。

2.按F12打开开发人员工具。

我们打开可能类似下面这种效果,并没有手机端的预览,这里我们需要点击左下角的切换设备仿真。

如何在电脑查看网站在安卓手机,苹果手机及iPad端页面模拟的预览效果插图1

3.修改调整界面

切换设备仿真仿真后可以看到是手机端的显示效果了,但是这界面太不方便了。我们需要修改下相关设置,点击右下角三个点的按钮停靠访问改为停靠右侧就可以方便预览手机端的效果。

如何在电脑查看网站在安卓手机,苹果手机及iPad端页面模拟的预览效果插图2

这时效果仍然不够满意,我们可以点击响应那个位置的按钮切换需要模拟的手机型号,百分比那里可以修改显示大小。

如何在电脑查看网站在安卓手机,苹果手机及iPad端页面模拟的预览效果插图3

这样就可以在电脑端浏览器预览模拟手机端的效果了。如果要退出预览只需要点击右上角的×,关闭即可。

如何在电脑查看网站在安卓手机,苹果手机及iPad端页面模拟的预览效果插图4

未经允许不得转载:WP站长圈 » 如何在电脑查看网站在安卓手机,苹果手机及iPad端页面模拟的预览效果