在前端开发中,经常需要判断访客的终端类型以适配不同设备的显示效果。本文将介绍如何通过JavaScript代码来实现对访问者终端类型的判断。
1. User Agent 字符串
User Agent是HTTP协议中的一个头部字段,它包含了浏览器或其他客户端程序相关的信息,比如浏览器名称、操作系统版本、设备类型等。我们可以通过检查User Agent字符串来推断出用户使用的终端类型。
以下是一些常见设备和浏览器的User Agent字符串:
- iPhone/iPad:
- Mozilla/5.0 (iPhone; CPU iPhone OS 14_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0 Mobile/15E148 Safari/604.1
- Mozilla/5.0 (iPad; CPU OS 14_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0 Mobile/15E148 Safari/604.1
- Android手机/平板:
- Mozilla/5.0 (Linux; Android 10; SM-G970F) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.181 Mobile Safari/537.36
- Mozilla/5.0 (Linux; Android 11; Mi 10T Pro) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.82 Mobile Safari/537.36 EdgA/46.2.4.5157
- Windows台式机:
- Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.114 Safari/537.36 Edg/89.0.774.68
可以看到,User Agent字符串中包含了许多有用的信息,我们可以通过解析这个字符串来判断终端类型。但是需要注意的是,由于User Agent字符串并不是标准化的规范,因此可能存在一些浏览器或设备会篡改User Agent字符串的情况,所以使用该方法来判断终端类型并不是完全可靠的。
以下是一个基于User Agent字符串的判断函数示例:
-------- --------- - ----- -- - ---------------------------------- ----- -------- - ------------------------------------ ----- --------- - ---------- -- ---------- - ----------------- -- - ------ ---------- - ---- - ----------------- -- - ------- ---------- - -
2. 媒体查询
CSS中的媒体查询也可以用来判断终端类型。通过使用@media规则,我们可以根据屏幕宽度、高度等条件来匹配不同的设备类型。
以下是一个基于媒体查询的判断函数示例:
-- ----- -- ------ ------ --- ----------- ------ - -- --- -- - -- ----- -- ------ ------ --- ----------- ------ --- ----------- ------- - -- --- -- - -- ----- -- ------ ------ --- ----------- ------- - -- --- -- -
3. JavaScript API
除了User Agent字符串和媒体查询,JavaScript还提供了一些API来判断终端类型。
3.1 window.orientation
window.orientation属性返回设备方向,如果返回0或180则表示竖屏,如果返回90或-90则表示横屏。通过检查这个属性的值,我们可以判断设备是手机还是平板。
以下是一个基于window.orientation属性的判断函数示例:
-------- ------------------ - ----- ----------- - ------------------- -- ------------ --- - -- ----------- --- ---- - ----------------- -- - ------ ---------- - ---- -- ------------ --- -- -- ----------- --- --- ---------------------------------------------------------- ---------- -------------------------------------------------------------------------------------