如何在 jQuery 中检测移动设备

2025年3月17日 | 阅读 3 分钟

如果我们想要搜索特定用户，下面给出了一系列 JavaScript 语法，可用于识别不同的移动设备，例如 iPod、iPad、Android、Blackberry、Windows Phone 和 WebOS 等。

语法

/**
 * jQuery.browser.mobile (http://detectmobilebrowser.com/)
 * jQuery.browser.mobile returns true if the browser act as a mobile device
 **/
(function(a){jQuery.browser.mobile=/android.+mobile|avantgo|bada/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lgpalm( os)?|phone|p(ixi|re)/|plucker|pocket|psp|symbian|treo|up.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-(n|u)|c55/|capi|ccwa|cdm-|cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do(c|p)o|ds(12|-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(-|_)|g1 u|g560|gene|gf-5|g-mo|go(.w|od)|gr(ad|un)|haie|hcit|hd-(m|p|t)|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c(-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac( |-|/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |/)|klon|kpt |kwc-|kyo(c|k)|le(no|xi)|lg( g|/(k|l|u)|50|54|e-|e/|-[a-w])|libw|lynx|m1-w|m3ga|m50/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|-([1-8]|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-[2-7]|i-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk/|se(c(-|0|1)|47|mc|nd|ri)|sgh-|shar|sie(-|m)|sk-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel(i|m)|tim-|t-mo|to(pl|sh)|ts(70|m-|m3|m5)|tx-9|up(.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(-|2|g)|yas-|your|zeto|zte-/i.test(a.substr(0,4))})(navigator.userAgent||navigator.vendor||window.opera);

一个基本示例

在这里，我们有使用 jQuery 检测手机的最基本代码。

if (jQuery.browser.mobile)
{
	console.log("You're using a cellular device!");
}
else
{
	console.log("You're not using a cellular device!");
}

支持的浏览器

上述语法和代码支持以下浏览器

Safari
谷歌浏览器
Mozilla Firefox
Microsoft Edge
Opera

现在，我们将定义不同的语法逻辑来检测各种类型的手机。

用于检测 iPhone

您可以使用以下 JavaScript 代码搜索 iPhone。

var isiPhone = / iphone/i.test(navigator.userAgent.toLowerCase());
 if (isiPhone)
{
	//... code block
}

用于检测 iPod

下面给出了用于检测 iPod 的 JavaScript 代码。

var isiPod = / ipod/i.test(navigator.userAgent.toLowerCase());
 if (isiPod)
{
	//… code block
}

用于检测 iPad

这里我们有一个用于检测 iPad 的示例。

var isiPad = / ipad/i.test(navigator.userAgent.toLowerCase());
 if (isiPad)
{
	//… Statement
}

用于检测安卓手机

您可以使用以下 JavaScript 代码检测安卓手机。

var isAndroid = / Android/i.test(navigator.userAgent.toLowerCase());
 if (isAndroid)
{
	//… Executable code
}

用于检测黑莓手机

您可以使用以下 JavaScript 代码检测黑莓手机。

var isBlackberry = / blackberry/i.test(navigator.userAgent.toLowerCase());
 if (isBlackberry)
{
	//… code statement
}

用于检测 iDevices

您可以使用以下 JavaScript 代码搜索 iDevices。

var isiDevice = / iPod| iPad| iPhone/i.test(navigator.userAgent.toLowerCase());
 if (isiDevice)
{
	//… code statement
}

用于检测 Windows Phone

您可以使用下面给出的 JavaScript 代码搜索 Windows 手机。

var isWindowsPhone = / windows phone/i.test(navigator.userAgent.toLowerCase());
 if (iswindowphone)
{
	//… code statement
}

用于检测 WebOs

您可以使用下面提到的 JavaScript 代码检测 WebOs。

var isWiebOs = / webos/i.test(navigator.userAgent.toLowerCase());
 if (isWebOs)
{
	//… code block
}

在这里，我们还有另一种方法，可以使用 window.matchmedia() 方法检测手机。

您还可以使用 JS window.matchMedia() 方法根据 CSS 媒体查询搜索蜂窝设备。这是预测移动设备的最佳和最简单的方法。

语法

示例 1： 桌面示例代码。

<!DOCTYPE html>
<html lang="en">
<head>
<title> jQuery Detect Mobile Device </title>
</head>
<body>
<script>
           if (window.matchMedia("(max-width: 768px)").matches)
           {             // The port of view is less than 768 pixel wide
           document.write("You are using a mobile device.");
           }
else
{           // The port of view is minimum 768 pixels wide
   document.write("You are using a tablet or desktop.");
           }
</script>
</body>
</html> 

输出

成功执行上述代码后，您将获得以下结果。

示例 2： 手机示例代码。

<!DOCTYPE html>
<html lang="en">
<head>
<title> jQuery Detect Mobile Device </title>
</head>
<body>
<script> 
        if (window.matchMedia("(max-width: 767px)").matches) 
        {                                         // The port of view is smaller than 768 pixels wide 
          document.write("You are using a mobile device."); 
        } 
else 
{                                                 // The port of view is minimum have 768 pixels wide
document.write("You are using a tablet or desktop."); 
        } 
</script>
</body>
</html> 

输出

成功实现上述代码后，您将获得以下结果。

下一个主题jQuery 中的 offset vs position

如何在 jQuery 中检测移动设备

语法

一个基本示例

支持的浏览器

用于检测 iPhone

用于检测 iPod

用于检测 iPad

用于检测安卓手机

用于检测黑莓手机

用于检测 iDevices

用于检测 Windows Phone

用于检测 WebOs

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

如何在 jQuery 中检测移动设备

语法

一个基本示例

支持的浏览器

用于检测 iPhone

用于检测 iPod

用于检测 iPad

用于检测安卓手机

用于检测黑莓手机

用于检测 iDevices

用于检测 Windows Phone

用于检测 WebOs

相关帖子

jQuery 调色板颜色选择器

使用 JQuery 创建待办事项列表

如何使用 jQuery 创建一个简单的地图

带有缩略图的 JQuery 照片库

jQuery 获取两个日期之间的天数差

在 JQuery 中添加编辑删除表行

使用 jQuery 自动刷新或重新加载页面

jQuery Excel 导出插件库

Pietimer jQuery 插件

使用 HTML 和 CSS 和 jQuery 创建 3D 文本效果

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器