在电脑上测试手机网站全攻略

news/2024/5/9 22:54:05/文章来源:https://blog.csdn.net/weixin_33691700/article/details/85637092

最近公司要开发网站的移动版,让我准备准备知识,话说本人开发移动网站的经验还真不多,最悲剧的事情就是我的手机是个经典的诺基亚,而且公司还不给配手机,这是有多扣啊,没办烦啦,没有手机就用电脑模拟呗,相办法代替,查了很多资料,尝试了大部分方法,下面将这一天的努力总结下分享给大家,也让大家免去看那么多文章,以下介绍的方法,都是本人亲自测试成功的方法。

 Chrome*

  chrome模拟手机总共有四种方法,原理都一样,通过伪装User-Agent,将浏览器模拟成Android设备。以下标星的为推荐方法。

  1.新建Chrome快捷方式

  右击桌面上的Chrome浏览器图标,在弹出的右键菜单中选择“复制”,复制一个图标副本到桌面。右击该副本,选择“属性”,打开相应的对话框,在“目标”文本框的字符后面添加以下语句:“–user-agent=”Android””,如下图:

Chrome模拟手机浏览器

  注意user前面是两个“-”,并且“chrome.exe”与“–user”之间有一个空格。确定之后,打开这个新建的Chrome快捷方式,输入3g.qq.com就可以浏览到像手机里打开一样的页面了。

  2.一次性模拟iPhone和安卓手机

  开始–运行中输入以下命令,启动浏览器:

  模拟谷歌Android:

1
chrome.exe --user-agent="Mozilla/5.0 (Linux; U; Android 2.2; en-us; Nexus One Build/FRF91) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1"

  模拟苹果iPhone:

1
chrome.exe --user-agent="Mozilla/5.0 (iPad; U; CPU OS 3_2_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B500 Safari/531.21.10"

  这种方法仅供特殊情况下使用,因为重启Chrome将不能恢复正常User-Agent,所以是一次性。

  更多的user-agent请自行搜索。

  3.安装插件

  插件可以很方便切换各种user-agent,很方便,但是可能会稍微影像性能。

  User-Agent Selector地址:https://chrome.google.com/webstore/detail/user-agent-selector/fnbmdojpgjpmjjmnjdnbobcdhenmmgod/related

   从上图可以看到,还有很多类似的插件,其实功能都大同小异。

  4:自带模拟器*

  打开chrome开发者工具,按F12(r32版本)1,然后找到右上角的齿轮按钮,打开设置面板,选择Overrides,勾上Show ‘Emulation’ view in console drawer(在控制台视图中显示“仿真”)。

  然后关闭设置面板,选择Elements面板(非Console就可以),找到右上角打开控制台面板,选择控制台面板里的Emulation面板,右边有很多选项,选择一个点击Emulate就可以了,Reset按钮能恢复到默认状态。

  打开仿真后,打开http://yanhaijing.com,即可看到如下的手机下的界面

  这种方法简单好用,而且不需要重启,推荐这种方法。

  注意:以上第一种和第二种方法都需要将全部打开的chrome窗口关闭,再打开才能起作用。

 Firefox

  1.修改user-agent

  和chrome一样安装插件修改user-agent的方法

  具体方法移步这里:http://blog.sina.com.cn/s/blog_645813a30100qf68.html

  2.火狐响应式设计+修改user-agent

  最近的火狐自己添加响应式设计功能和3D试图都很棒,打开火狐自己的控制台(非firebug),找到右上角的响应式设计按钮。

  打开后即切换到响应式设计界面

  但我们看到打开QQ的站点并未被自动引到QQ的移动页面,这样只对响应式设计的界面起作用,对想QQ这样云端判断,返回不同页面的并不适应,这里就要配合上面的方法,再改下user-agent,即可实现类似chrome的调试功能。

  3.Firefox OS 模拟器

  安装的方法 参考这里:https://developer.mozilla.org/zh-CN/docs/Tools-840092-dup/Firefox_OS_%E6%A8%A1%E6%8B%9F%E5%99%A8#Installing

  安装完成后可打开如下界面,可用里面的浏览器打开网站即可,但这种方法打开的是电脑网站,而不是手机网站,也就是他的user-agent不是手机的,故对响应式界面起作用,对判断user-agent的网站不起作用,访问qq,baidu等返回的都是电脑界面。

 Opera*

  1.修改user-agent

  和chrome和firefox类似,可自行安装插件,自opera12之后,opera改用webkit内核,故可安装chrome的插件,也可自行在opera的商店中搜索插件

  User Agent Changer下载: https://addons.opera.com/zh-cn/extensions/details/user-agent-changer/?display=en

  2.Opera Mobile Emulator + dragonfly*

  下载适合自己的版本,安装完毕会开如下界面:

  左侧选择平台,右侧选择参数,选择完毕点击启动,如下的几面,用过手机opera的朋友会很熟悉,就是手机opera

  关于opera mobile emulator的更详细介绍参看文章末尾参考资料的相关内容。

  但此时,还是只能看而已,不能调试模拟器里的网站,这里需要dragonfly配合以实现调试,由于opera12后换了内核,不能安装dragonfly了,所有你需要一款opera12的浏览器,和dragonfly的离线包,配置好后具体如何连接请参看这里http://www.opera.com/dragonfly/documentation/remote/

  全部设置好后即可实现在电脑上调试手机网页,如下图所示:

  opera12下载地址:http://yanhaijing.7958.com/down_10918696.html

  dragonfly中文离线包下载地址:http://yanhaijing.7958.com/down_10918700.html

  opera mobile emulator下载地址:http://www.opera.com/zh-cn/developer/mobile-emulator

 模拟器*

 1.官方模拟器*

  做安卓开发的肯定都知道安卓模拟器,这是谷歌官方的提供的开发环境,能模拟安卓环境,还可切换各个版本,可下载配置好的环境,然后打开eclipes,直接打开AVDM,穿件一个AVD,然后start,如下图:

  要等一大会时间,会打开模拟器,和安卓环境一样,打开里面的浏览器测试即可。但我的浏览器打不开不知道为什么,郁闷的很啊。

  下载地址:http://developer.android.com/sdk/index.html

  2.bluestacks

  这也是一款模拟器,可自行搜索,本人安装后电脑就卡死了,可能我的电脑配置不行吧,看介绍还是不错的。

 在线测试

  在线只能测试界面的视觉效果,不能调试,但也是很不错的。

  1.Mobile Emulator*

  非常不错,速度也很快,界面很简洁,支持多种平台。

  http://emulator.mobilewebsitesubmit.com/

  2.opera mini simulator

  需要java环境支持,单一平台,opera出品,速度很快。

  http://www.opera.com/zh-cn/developer/opera-mini-simulator

  3.webpage mobile

  说实话弄了半天也没弄出来,大大的鄙视下吧,但是能测试的平台很全面。

  http://www.webpagetest.org/mobile

 总结

  以上列出了多种方法,各有利弊,希望大家选择适合自己的方法,本人推荐chrome自带模拟器和opera mobile emulator + dragonfly的方法。因为这两种方法,接近真是手机环境,又能调试css和js。

  当然文中没有提到的还有最好的方法就是你有一台手机,那就太好了,配合远程调试,是最最理想的办法。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_769809.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

教资报名网站显示无法访问此页面

网上很多人解决办法是 把网址复制出来, 开头的https:// 换成 http:// 添加到浏览器的兼容性页面应该就能打开了 ,最终效果是可以的,但是治标不治本, 在选完笔试科目后 点击付款就会出现和之前相同的问题 2.最终解决办法如下 勾选为TLS 1.2, 1.1即可

常用工具网站

1. 在线PDF转Word免费的转换器工具 https://www.pdfkz.com/pdf-to-word 2. 在线图片免费拼接 https://www.toolnb.com/tools/tppj.html

适合程序员学习的国外网站推荐

1.Baeldung 面向Java开发的学习网站, 网站页面精美, 风格略像Spring官网 https://www.baeldung.com/ 2.GeeksforGeeks 里面的内容不止于Java开发, 数据结构, 算法, 前端, 机器学习, 面试等等 GeeksforGeeks | A computer science portal for geeks 3.javaTpoint 适合初学…

程序员学习的5个国外网站推荐

📒一、StackOverFlow📒 链接 : Newest Questions - Stack Overflowhttps://stackoverflow.com/questions StackOverFlow作为全球最大的技术问答交流网站, 浏览时也是纯英文网站所以首先养成用英文来搜索你的问题, 类似CSDN中的问答 📓二、…

【大型网站技术实践】初级篇:搭建MySQL主从复制经典架构

随笔- 80 文章- 1 评论- 531 【大型网站技术实践】初级篇:搭建MySQL主从复制经典架构 一、业务发展驱动数据发展 随着网站业务的不断发展,用户量的不断增加,数据量成倍地增长,数据库的访问量也呈线性地增长。特别是在用户访问高…

Oracle Erp常用网站

2014-01-01 Created By BaoXinjian 英文站 Oracle EBS R12 官方参考手册(User Guide, Implementation Guide)Oracle Integration Repository关于各类API、接口等信息。Oracle White Paper LibraryOracle白皮书,涉及数据库、应用、解决方案等多个领域。Oracle E-Deli…

开发网站接触到的软件---自我总结

1.Dreamweaver(DW) 可视化工具,DW的内存占用大概平常80M左右,刚开始写网页就是用的DW,后面发现webStorm的功能更加强大,DW后期使用感觉很卡 优点:图片热区的设置,用DW很方便。 2.web…

百度SEO:最新搜索引擎排名因素有哪些?

搜索引擎排名规则,一直以来都是一个争论的焦点,随着百度算法的不断调整,实际上它是一个动态因素,自从熊掌号上线以来,可谓搜索排序大洗牌,毫无疑问内容是基石,它几乎更古不变,而链接…

结合bootstrap与后端CI框架的网站开发(一)

2019独角兽企业重金招聘Python工程师标准>>> CI框架是一套基于MVC的后端框架,历史比较就远了,非常轻量级,对于一些小网站的开发已经绰绰有余。不过我仅对VIEW层,也就是前端部分进行记录。如有错误,希望得到…

Nginx+Keepalived实现网站高可用方案

转载:http://openskill.cn/article/166 公司内部 OA 系统要做线上高可用,避免单点故障,所以计划使用2台虚拟机通过 Keepalived 工具来实现 nginx 的高可用(High Avaiability),达到一台nginx入口服务器宕机&#xff0c…

网站爬取工具_介绍一些比较方便好用的爬虫工具和服务

在之前介绍过很多爬虫库的使用,其中大多数也是 Python 相关的,当然这些库很多都是给开发者来用的。但这对一个对爬虫没有什么开发经验的小白来说,还是有一定的上手难度的。现在市面上其实也出现了非常多的爬虫服务,如果你仅仅是想…

index加载显示servlet数据_可视化动态网站柱状图加载

准备一个动态网站工程将已经完成的静态页面及资源拷贝到WebContent目录下启动Tomcat,访问页面,成功后代表静态页面访问成功准备一个Servlet,作为左边柱状图的入口类配置Web.xml,将Servlet准备好将引入的包拷贝或者引入到项目里引入的包&#…

python访问网站添加请求头_python request.urlretrieve的使用 如何添加请求头

python3 request.urlretrieve 添加请求头下载图片import urllib.requestopener urllib.request.build_opener()opener.addheaders [("User-agent", "Mozilla/5.0")]urllib.request.install_opener(opener)urllib.request.urlretrieve("type URL her…

wordpress站点 HTML,如何将WordPress生成HTML静态化网站

对于将wordpress生成HTML静态化网站,很多人会使用cos-html-cache的插件实现。这个插件非常简洁小巧,直接在原网站上生成首页和文章页的html文件,不过,这个插件只支持文章静态化,不支持页面、标签和分类的静态化&#x…

网站每天1万ip需要多大服务器,每天10000ip需要什么配置的服务器

每天10000ip需要什么配置的服务器 内容精选换一换Agent服务证书,即鲲鹏性能分析工具的服务端和Agent端之间通讯的证书。已成功登录系统性能分析。管理员用户(tunadmin)可以执行生成证书、更换证书和更换工作密钥的操作,普通用户只能查看Agent服务证书信息…

微服务电商qps_亿级流量电商网站微服务架构

亿级流量电商网站微服务架构缓存设计缓存穿透缓存穿透是指查询一个根本不存在的数据, 缓存层和存储层都不会命中,通常出于容错的考虑, 如果从存储层查不到数据则不写入缓存层。缓存穿透将导致不存在的数据每次请求都要到存储层去查询&#xf…

java初级项目 小说_webmagic项目实战(爬小说网站)

正常发货正版包邮java从入门到软件68.9元包邮(需用券)去购买 >项目背景小说网站优书网(http://yousuu.com/bookstore/)提供的小说查询功能不是很强大,很多高级查询功能都没有,比如想要查询出评分在8.0以上并且标签包含‘仙侠’、字数超过100万字的小说…

网站服务器空间域名绑定,服务器空间怎么绑定域名

服务器空间怎么绑定域名 内容精选换一换一个网卡只能绑定一个EIP。您需要多个EIP时,可以将EIP绑定到扩展网卡,但扩展网卡绑定EIP以后,需要在裸金属服务器内根据实际网络情况做相应的操作,例如:增加策略路由或者命名空间…

数万网站仍在使用有已知漏洞的老旧 JavaScript 库

美国东北大学研究人员在对超过 133000 个网站分析时发现,有超过 37% 的站点仍在使用至少包含一个已知公开漏洞的 JavaScript 库。研究人员早在 2014年进行研究时就曾提醒,应当注意由于在浏览器中加载老旧版本的 JavaScript 库(如 jQuery、Ang…

Firefox 55不会将用户位置提供给非https网站

在2017年8月,Mozilla将发布Firefox 55。一个值得注意的变化是那些不安全的网站将无法获取用户的地理位置数据,这些信息将只发送到HTTPS和加密的WebSocket连接,这一举动是浏览器制造商推动网站采用更安全协议的另一个步骤。 根据Mozilla在五个…