欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

移动调试和终端检测

程序员文章站 2022-04-14 16:37:01
在控制台-机型-点击小三角-选择edit 有更多机型可以选择 选择具体的机型之后,dpr是不能更改的。选择responsive可以更改机型 如果没有看到dpr就去右边小点点那里找到并打开 真机调试: 浏览器上的调试工具只是模拟行为,最后还是需要在真机上查看测试 可以用一些集成环境搭建服务器,然后上传 ......

在控制台-机型-点击小三角-选择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>