移动调试和终端检测
在控制台-机型-点击小三角-选择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>
下一篇： Python基础篇_实例练习1