查看: 25354|回复: 30

[答疑解惑] 怎样在PC端模拟手机游览器测试页面(谷歌、360、IE、火狐游览器)

  [复制链接]
发表于 2015-9-10 11:57:25 | 显示全部楼层 |阅读模式
很多人问怎样在PC端模拟手机游览器测试页面?


其实是很简单的,只要你有一个支持手机模拟的游览器即可,这里我就给大家介绍一下常见游览器的查看方法!

》》Chrome

效果图


001.jpg


第一步以蚂蚁HTML5社区首页www.zzfriend.com为例,电脑上用Chrome打开,看到的页面就是正常的电脑版网页。

002.jpg


第二步这时我们随便在网页上任何一处右键,都可以看到右键菜单最末尾处的“审查元素”(或者按键盘F12),点击它。

003.jpg

第三步:再看到首页的界面变成了这样,注意到偏右上角位置有一个小手机的图标,点击它。

002.gif



003.gif

第四步:找到偏左上角的选择模式,在下拉菜单中有许多设备可供选择,选择了那种设备,浏览器的UA标签就会改变,呈现的就是选择设备的显示方式。有kindle系列,ipone系列,ipad系列,nexus系列,还有一些平板设备一共46种丰富的选择,如果没有找到需要的还可以在下面的框里面自定义UA。

004.gif

第五步:选择一个想要的样子,之后刷新,就可以看到进入手机浏览器模拟浏览的样子了。当然也可以自己自定义长宽。

005.gif

评分

参与人数 2蚂蚁币 +3 收起 理由
时期 -2 少了火狐预览器!
小个儿 + 5 神马都是浮云

查看全部评分

回复

使用道具 举报

 楼主| 发表于 2015-9-10 17:11:41 | 显示全部楼层
》》360游览器

效果图


001.gif



第一步:打开360浏览器,右击空白处,点击“审查元素”(或者按键盘F12键)。

002.gif


第三步:点击“审查元素”界面右下角“设置”按钮,如下图所示。

002.gif


第四步:点击“Overrides”,勾选“Enable”和“User Agent”。

003.gif


第五步:完成以上步骤后,在下拉框中根据自己的需求选择手机系统。

004.gif


第六步:操作完成后,在地址栏中输入你想测试的手机链接。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2015-9-10 17:38:55 | 显示全部楼层
》》IE游览器(适用于IE9+版本)

效果图


001.gif


第一步:点击浏览器右侧的“工具”图标,选择“F12开发人员工具”或者键盘按“F12”快捷键

002.gif


第二步:进入“F12开发人员工具”后,选择“工具”--->“更改用户代理字符串”,刷新页面即可游览手机效果!

003.gif


第三步:由于IE游览器支持格式较少,进入“F12开发人员工具”后,选择“工具”--->“更改用户代理字符串”-->“自定义”,可以使用自定义!
安卓手机的添加办法
(1)在“友好名称”内输入:android
(其实这里可以随便输入名称)
(2)在“用户代理字符串”内输入:
Mozilla/5.0 (Linux; U; Android 4.0.3; ko-kr; LG-L160L Build/IML74K) AppleWebkit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30
(3)点击“添加”按钮,然后更新!

004.gif


第四步:苹果手机的添加办法
(1)在“友好名称”内输入:iPhone
(其实这里可以随便输入名称)
(2)在“用户代理字符串”内输入:
Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_0 like Mac OS X; en-us) AppleWebKit/528.18 (KHTML, like Gecko) Version/4.0 Mobile/7A341 Safari/528.16
(3)点击“添加”按钮。

005.gif


第五步:如果新打开的浏览器,想要实现模拟手机效果。
选择“工具”--->“更改用户代理字符串”,会发现多出两个选项“android”和“iPhone”,选择你想要模拟的手机系统。

005.gif


第六步:最后要按“F5”,刷新下当前页面,看看是不是跟手机上看到的界面一样了!
回复 支持 反对

使用道具 举报

发表于 2015-9-15 18:17:33 | 显示全部楼层
》》Mozilla Firefox(火狐游览器)

第一步:我们需要用火狐浏览器测试一下,首先在电脑上安装好火狐浏览器,打开蚂蚁HTML5社区(http://www.zzfriend.com

001.gif



第二步:打开火狐浏览器右上角打开菜单-附加组件,右上角 输入 User agent switcher搜索,安装!

002.gif



003.gif



第三步:安装成功后重启火狐浏览器,右上角打开菜单-定制

004.gif



第四步:将左边刚刚安装的附加组件拖到右边

005.gif



第五步:火狐浏览器右上角依次点击 打开菜单- User agent switcher-User agent switcher-options

006.gif



第六步:在出来的弹框,选择iPhone 3.0 , 确定

007.gif



第七步:再次打开火狐浏览器,打开菜单- iPhone 3.0 ,点亮iPhone 3.0 ,现在就可以打开手机网站了

009.gif


点评

感谢美女大神补充啊!!!  发表于 2015-9-18 21:32
感谢美女大神补充啊!!!  发表于 2015-9-18 21:32
回复 支持 反对

使用道具 举报

发表于 2015-10-26 16:03:48 | 显示全部楼层
谢谢分享,很不错。顶一下。
回复 支持 反对

使用道具 举报

发表于 2015-10-26 16:04:06 | 显示全部楼层
谢谢分享,很不错。顶一下。
回复 支持 反对

使用道具 举报

发表于 2015-11-4 09:59:31 | 显示全部楼层
学习学习顶一个
回复 支持 反对

使用道具 举报

发表于 2015-11-8 22:45:07 | 显示全部楼层
学习学习顶一个
回复 支持 反对

使用道具 举报

发表于 2015-11-8 22:52:51 | 显示全部楼层
nrta110和官方的窗口ii'k'
回复 支持 反对

使用道具 举报

发表于 2015-11-18 19:18:16 | 显示全部楼层
好帖子,学习了
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

关闭

网站推荐上一条 /1 下一条



邮箱:[email protected] QQ:791577401 木子牛HTML5工作室 版权所有

© MUZINIU Inc.小黑屋|手机版|Archiver|HANGNIU  

Powered by MuZiNiuX3.2( 豫ICP备12017936号 )

 豫公网安备 41078102000103号

快速回复 返回顶部 返回列表