移动调试和终端检测

在控制台-机型-点击小三角-选择edit

有更多机型可以选择

 

 

 

 

 

选择具体的机型之后,dpr是不能更改的。选择responsive可以更改机型

如果没有看到dpr就去右边小点点那里找到并打开

 

 

 

 

真机调试:

浏览器上的调试工具只是模拟行为,最后还是需要在真机上查看测试

可以用一些集成环境搭建服务器,然后上传代码测试查看,推荐 phpstudy

把项目放在www目录下,使用localhost访问:http://localhost/demoo/

 

 

 

如果想要手机也访问到这个页面,就需要保证手机和电脑在同一个网络中,通常用一个路由器即可做到

windows打开cmd,ipconfig查看ip地址

 

 

 

 选中ip地址,鼠标右键即可复制,然后替换掉网址栏里的localhost : http://192.168.10.146/demoo/

 

 

  

在手机上通过输入:http://192.168.10.146/demoo/ 即可访问

嫌麻烦的话也可以使用草料二维码将网址转二维码,然后扫码访问

 

常见真机调试才能测试出的问题:

如,点击回到顶部按钮,在真机失效

<script>
        var backtopEl = document.getElementById('backtop');
        backtopEl.addEventListener('click',function () {
            document.documentElement.scrollTop = 0;
            // document.body.scrollTop = 0;
        },1)">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>

 

 

 

 电脑端访问:http://192.168.10.146/demoo/

 然后在手机上也访问这个网址(注意是同一个局域网下),在vorlon客户端会显示已经连接的设备

 

-0代表电脑调试模拟,-1是真机调试的

选择-1真机调试的设备,在真机进行操作时,可以在vorlon客户端查看console的结果(如果你有写相关调试代码的话)

 

 

多终端同步工具 Browsersync  https://www.browsersync.io/

首先安装

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>终端检测</name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"bodyscript>
        console.log(navigator.userAgent);
    html>

 

 

终端检测可以在后端完成,也可以在前端完成(建议后端来完成,效率更高)

终端检测实现页面跳转

>
        //console.log(navigator.userAgent);
        var isMobile=navigator.userAgent.match(/android|iphone|ipad|ipodi);
        if(isMobile){
            location.href"m.域名.com;
        }else{
            location.href域名.com;
        }
    >

 

终端检测实现资源加载

(isMobile){
             location.href="m.域名.com";
            
            zepto
            
        }{
            location.href="域名.com";
            
            jQuery
        }
    >

 

相关文章

HTML5和CSS3实现3D展示商品信息的代码
利用HTML5中的Canvas绘制笑脸的代码
Html5剪切板功能的实现
如何通过HTML5触摸事件实现移动端简易进度条
Html5移动端获奖无缝滚动动画实现
关于HTML5和CSS3实现机器猫的代码