移动调试和终端检测
在控制台-机型-点击小三角-选择edit
有更多机型可以选择
选择具体的机型之后,dpr是不能更改的。选择responsive可以更改机型
如果没有看到dpr就去右边小点点那里找到并打开
真机调试:
浏览器上的调试工具只是模拟行为,最后还是需要在真机上查看测试
可以用一些集成环境搭建服务器,然后上传代码测试查看,推荐 phpstudy
把项目放在www目录下,使用localhost访问:
如果想要手机也访问到这个页面,就需要保证手机和电脑在同一个网络中,通常用一个路由器即可做到
windows打开cmd,ipconfig查看ip地址
选中ip地址,鼠标右键即可复制,然后替换掉网址栏里的localhost :
在手机上通过输入: 即可访问
嫌麻烦的话也可以使用草料二维码将网址转二维码,然后扫码访问
常见真机调试才能测试出的问题:
如,点击回到顶部按钮,在真机失效
<script> var backtopel = document.getelementbyid('backtop'); backtopel.addeventlistener('click', function () { document.documentelement.scrolltop = 0; // document.body.scrolltop = 0; }, false); </script>
这段代码在部分设备可能会失效,因为有些浏览器无法识别 document.documentelement
解决方法是添加一句:
document.body.scrolltop=0;
远程调试工具 vorlon.js
有时在pc端可以使用console.log来调试,但是在移动端没有控制台,没法这么干
移动端只有alert可以调试,但是不太方便
如果想要在手机端操作,并能在电脑端查看打印出来的结果,就需要这个远程调试工具
vorlon.js依赖于node.js
安装好最新稳定版的node.js,然后打开cmd,输入node -v,如果打印出版本代表node.js安装成功
根据vorlon.js官网,安装可以使用:npm i -g vorlon
但是npm是国外镜像,速度非常慢,建议使用国内的淘宝镜像cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
然后使用淘宝镜像安装vorlon
cnpm i -g vorlon
输入vorlon
像我这样的代表安装成功哈
在浏览器输入:localhost:1337即可访问
把下面这句话加入要用vorlon访问的页面
<script src="http://localhost:1337/vorlon.js"></script>
电脑端访问:
然后在手机上也访问这个网址(注意是同一个局域网下),在vorlon客户端会显示已经连接的设备
-0代表电脑调试模拟,-1是真机调试的
选择-1真机调试的设备,在真机进行操作时,可以在vorlon客户端查看console的结果(如果你有写相关调试代码的话)
多终端同步工具 browsersync
首先安装
cnpm install -g browser-sync
安装完成之后进入项目目录,在空白处按住shift+鼠标右键,选择:在此处打开命令窗口
这样可以保证打开的目录是位于项目目录
然后开启一个自带服务器,监测所有文件的变化:
browser-sync start --server --files="*"
然后默认浏览器会自动打开项目文件
http://localhost:3000 是项目打开页面, http://localhost:3001是调试页面(360浏览器自动翻译网页了)
在cmd中使用ipconfig查看ip地址,然后把localhost换成ip地址,在同一局域网下,用移动设备来访问网址:
可以使用草料二维码生成二维码,微信扫码打开
能够实现的效果是:当你在浏览器上操作的时候(比如上下滑动试试),手机上也会有同步的操作;反过来也是!!!感觉好给力!!!
当修改完文件之后,电脑上会自动监测文件变化,修改样式;不过手机端我测试了下没有实时生效,估计是因为缓存吧
终端检测:检测访问网站的终端是pc还是移动设备
为什么要终端检测:
页面跳转
加载相应资源(比如手机端更适合zepto,pc端更适合jquery)
打印navigator.useragent(我用的谷歌浏览器)
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>终端检测</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> </head> <body> <script> console.log(navigator.useragent); </script> </body> </html>
终端检测可以在后端完成,也可以在前端完成(建议后端来完成,效率更高)
终端检测实现页面跳转
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>终端检测</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> </head> <body> <script> //console.log(navigator.useragent); var ismobile=navigator.useragent.match(/android|iphone|ipad|ipod/i); if(ismobile){ location.href="m.域名.com"; }else{ location.href="域名.com"; } </script> </body> </html>
终端检测实现资源加载
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>终端检测</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> </head> <body> <script> //console.log(navigator.useragent); var ismobile=navigator.useragent.match(/android|iphone|ipad|ipod/i); if(ismobile){ // location.href="m.域名.com"; //zepto }else{ //location.href="域名.com"; //jquery } </script> </body> </html>