推广 热搜:   中国  公司  行业  设备  快速  企业  上海  未来  技术 

网站如何判断请求是来自手机-移动端还是PC端-电脑端?如何让网站能适应不同的客户端?附常见设备-浏览器的user-agent(User-Agent)

   日期:2024-12-20     移动:http://www78564.xrbh.cn/mobile/quote/27242.html

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

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

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

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

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

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

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

 

上面的应该算作PC端,因为mac是用在苹果的个人笔记本(MacBook)和台式电脑(iMac)上的系统。所以正确的移动端包含的关键字如下

 

另外,我们还可以把含的合并,并把变为,所以最终我们要判断user-agent里含不含下面这些字符串,如果含,则认为是移动端,如果不含,则认为不是移动端

 

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

附一些常见的浏览器的user-agent(User-Agent)

android、mobile

 

iphone、mobile、mac os

 

ipad、mobile、mac os

 

华为平板移动端模式的uer-agent如下

 

华为手机上自带的浏览器开移动端模式如下

 

上面这个user-agent各部分意义解释如下

  1. Mozilla/5.0: 这是标准的Mozilla格式标识符,表明该User-Agent字符串是为了与Mozilla浏览器兼容而设计的。实际上,现代浏览器的User-Agent字符串通常以"Mozilla/5.0"开头,即使它们不是Mozilla浏览器。

  2. (Linux; Android 12; HarmonyOS; BMH-AN10; HMSCore 6.12.2.302): 这部分提供了有关操作系统的信息。在这个例子中,用户代理运行在一个Linux内核上,版本为Android 12,同时还包括了HarmonyOS的信息,表明可能是华为设备。

  3. AppleWebKit/537.36 (KHTML, like Gecko): 这表示浏览器内核,通常用于渲染网页。在这里,浏览器内核是WebKit,支持KHTML(KHTML是一个用于Konqueror浏览器的渲染引擎)和Gecko(Mozilla Firefox浏览器的引擎)。Applewebkit/537.36是主流浏览器(如Chrome、Safari等)中的核心引擎,是用于处理网页显示的主要软件组件之一。它是由Webkit引擎(一个开源的Web浏览器引擎)衍生出来的。

  4. Chrome/99.0.4844.88: 这是浏览器的名称和版本信息。在这个例子中,浏览器是Chrome,版本号是99.0.4844.88。

  5. HuaweiBrowser/14.0.0.330: 这是另一个浏览器的信息,可能是设备上的另一个浏览器。在这里,浏览器是华为浏览器,版本号是14.0.0.330。应该说是华为浏览器在Chrome浏览器的基础上开发而来,而Chrome浏览器用的核是AppleWebKit/537.36。

  6. Mobile Safari/537.36: 这是指浏览器的用户代理是模拟移动设备的Safari浏览器,版本号是537.36。

总的来说,该User-Agent字符串表示一个在Android 12上运行的设备,可能是华为设备,同时使用了Chrome和华为浏览器来访问网页。

手机上的傲游浏览器的如下

 

手机上的QQ浏览器如下

 

PC端上的360极速浏览器,开移动端模式,发现uer-agent如下

 

PC端上的360极速浏览器,开电脑模式,发现uer-agent如下

 

华为平板开电脑模式,发现uer-agent如下

 

手机上的傲游浏览器开电脑模式,发现uer-agent如下

 

手机上的华为自带浏览器,开电脑模式,发现uer-agent如下

本文地址:http://www78564.xrbh.cn/quote/27242.html    迅博思语 http://www78564.xrbh.cn/ , 查看更多

特别提示:本信息由相关用户自行提供,真实性未证实,仅供参考。请谨慎采用,风险自负。


相关最新动态
推荐最新动态
点击排行
网站首页  |  二维码  |  关于我们  |  联系方式  |  使用协议  |  版权隐私  |  网站地图  |  排名推广  |  广告服务  |  积分换礼  |  网站留言  |  RSS订阅  |  违规举报  |  粤ICP备2023022329号