当前位置: 首页 > news >正文

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

如果网站需要实现手机和PC双界面适应,可以有两种方式:
第一种是响应式界面,根据屏幕宽度来判定显示的格式。这种需要前端来做,手机/PC共用一套代码,有一定的局限性。

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

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

那么怎么判断呢?
可参照下面两篇博文进行:
https://blog.csdn.net/weixin_27322123/article/details/116516053

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

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

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

mobile
android
mac os
windows phone
iphone
ipad

注意:先要对headers全部转换为小写哦。
相关实例如下:

android、mobile:

"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:

"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:

"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。

http://www.lryc.cn/news/209257.html

相关文章:

  • sass和 scss的区别?
  • Vuex 动态模块状态管理器
  • 实现分片上传、断点续传、秒传 (JS+NodeJS)(TypeScript)
  • 浅谈安科瑞EMS能源管控平台建设的意义-安科瑞 蒋静
  • 【原创】指针变量作为函数参数要点注意+main函数中值是否改变
  • 售后处置跟踪系统设想
  • python实现ModBusTCP协议的server
  • AndroidStudio编译错误‘android.injected.build.density‘ is deprecated
  • 计网小题题库整理第一轮(面向期末基础)(3)
  • 进程控制(一):进程终止
  • 特殊类设计[下] --- 单例模式
  • 计算机网络-应用层(1)
  • Kotlin基础——枚举、When、in、for
  • C++编程题目------平面上的最接近点对(分治算法)
  • Linux下的文件操作和文件管理
  • 设计模式之桥梁模式
  • “从部署到优化,打造高效会议管理系统“
  • Facebook广告效果数据获取
  • nlp之文本转向量
  • 【luckfox】添加压力传感器hx711
  • C++11的lambda表达式
  • 矩阵特征值与特征向量的理解
  • 云原生安全:如何保护云上应用不受攻击
  • 如何在用pip配置文件设置HTTP爬虫IP
  • 2023MathorCup高校数模挑战赛B题完整解题代码教程
  • 《动手学深度学习 Pytorch版》 10.7 Transformer
  • ORACLE-递归查询、树操作
  • MySQL篇---第四篇
  • em/px/rem/vh/vw单位的区别
  • 【C++】多态 ③ ( “ 多态 “ 实现需要满足的三个条件 | “ 多态 “ 的应用场景 | “ 多态 “ 的思想 | “ 多态 “ 代码示例 )