这两天在研究如何区分手机用户(竖屏)和电脑用户(横屏),以此来做到使用不同的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 {
//用户是电脑进行操作
}
有用一个赞谢。