网站如何判断请求是来自手机-移动端还是PC-电脑端?如何让网站能适应不同的客户端?

如果网站需要实现手机和PC双界面适应,可以有两种方式:

第一种是响应式界面,根据屏幕宽度来判定显示的格式。这种需要前端来做,手机/PC共用一套代码,有一定的局限性。

第二种是后端通过request请求头中的内容来分析客户端设备类型,从而返回不同的参数响应。这种方法需要前端写两套代码,根据后台返回的参数不同而跳转到不同的界面。

个人比较倾向于第二种方法,第二种方法显示页面的兼容性更强,不会造成一些意想不到的由客户端不同造成的兼容性问题。

那么怎么判断呢?

可参照下面两篇博文进行:
https://blog.csdn.net/weixin_27322123/article/details/116516053

https://blog.csdn.net/qq_38084142/article/details/81663465

其实上面两篇博文的价值就告诉你在headers中,如果有哪些关键字就可判断为来自于移动端,否则就认为是电脑端。

在分析了自己网站的日志后,并结合上面的文章,总结出如下关键词为来自移动端:

bash 复制代码
mobile
android
mac os
windows phone
iphone
ipad

注意:先要对headers全部转换为小写哦。

相关实例如下:

android、mobile:

bash 复制代码
"Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.69 Mobile Safari/537.36"

iphone、mobile、mac os:

bash 复制代码
"Mozilla/5.0 (iPhone; CPU iPhone OS 16_5_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 MicroMessenger/8.0.38(0x1800262b) NetType/WIFI Language/zh_CN qcloudcdn-xinan Request-Source=4 Request-Channel=99"

ipad、mobile、mac os:

bash 复制代码
"Mozilla/5.0 (iPad; CPU OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1"

具体在实现时,判断顺序如下:

mobile→

android→

mac os→

iphone→

ipad→

windows phone。

相关推荐
TimeDoor1 天前
在 Windows上安装 Node.js 开发环境的完整指南
node.js·web开发
Amd7944 天前
掌握FastAPI与Pydantic的跨字段验证技巧
fastapi·web开发·数据校验·pydantic·验证器·api集成·跨字段验证
Amd79423 天前
FastAPI 核心机制:分页参数的实现与最佳实践
性能优化·fastapi·安全实践·web开发·分页·错误处理·数据库查询
Amd79424 天前
FastAPI 错误处理与自定义错误消息完全指南:构建健壮的 API 应用 🛠️
fastapi·web开发·错误处理·数据校验·api设计·开发最佳实践·自定义错误消息
Amd79425 天前
FastAPI 参数别名与自动文档生成完全指南:从基础到高级实战 🚀
fastapi·web开发·数据校验·开发效率·api设计·自动文档生成·参数别名
Amd7941 个月前
FastAPI Cookie 和 Header 参数完全指南:从基础到高级实战 🚀
fastapi·web开发·cookie·header·数据校验·安全性·api设计
Amd7941 个月前
FastAPI 表单参数与文件上传完全指南:从基础到高级实战 🚀
fastapi·web开发·文件上传·form·file·api设计·表单参数
桃园码工4 个月前
第三章:基本语法 3.数据类型 --Go 语言轻松入门
golang·web开发·go语言
cd_farsight6 个月前
web 和大数据的就业前景怎么样?
大数据·web开发
pcplayer6 个月前
WEB 编程:使用富文本编辑器 Quill 配合 WebBroker 后端
前端·后端·delphi·web开发·webbroker