JS/Node判断手机用户还是电脑用户

这两天在研究如何区分手机用户(竖屏)和电脑用户(横屏),以此来做到使用不同的ui、展现不同的页面。

node.js中,输入以下代码来康康结果:

const http = require("http");
var server = http.createServer(function(req,res){
    console.log(req.headers);
    res.end(req.headers['user-agent']);
});
server.listen(80);
console.log("服务已运行于端口80!");

访问localhost,结果如下(电脑端):

 手机端结果:

 

终端输出:

服务已运行于端口80!
{
  host: 'localhost',
  connection: 'keep-alive',
  'cache-control': 'max-age=0',
  'sec-ch-ua': '" Not A;Brand";v="99", "Chromium";v="100", "Google Chrome";v="100"',
  'sec-ch-ua-mobile': '?0',
  'sec-ch-ua-platform': '"Windows"',
  'upgrade-insecure-requests': '1',
  'user-agent': 'Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.75 Safari/537.36',
  accept: 'text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9',
  'sec-fetch-site': 'none',
  'sec-fetch-mode': 'navigate',
  'sec-fetch-user': '?1',
  'sec-fetch-dest': 'document',
  'accept-encoding': 'gzip, deflate, br',
  'accept-language': 'zh-CN,zh;q=0.9',
  cookie: 'Webstorm-be571779=0a84eb91-52eb-43c7-8056-a148b773a732; Pycharm-ee4d324e=08eb0089-1b76-45b9-a59d-0f2282413c32; Phpstorm-c886b2d5=aea2f835-d73d-4b04-a525-55b360d5c693'
}

这个headers中不仅包含了请求的用户端系统、浏览器,cookie也在其中。所以我们就可以用以下代码来进行区别手机端和电脑端不通用户来操作:

const http = require("http");
var server = http.createServer(function(req,res){
    req.isMobile = /Android|webOS|iPhone|iPod|BlackBerry/i.test(req.headers['user-agent']);
    if(req.isMobile){
        //手机端操作
    } else {
        //电脑端操作
    }
});
server.listen(80);
console.log("服务已运行于端口80!");

方法就是判断用户信息里包不包含android、iphone、ipad...(用的正则表达式)

前端js判断法也展示一下:

if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
    //用户是手机进行操作
} else {
    //用户是电脑进行操作
}

有用一个赞谢。

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值