深入理解 `wp_is_mobile()` 函数的源码，它是如何通过检测 `User-Agent` 来判断是否为移动设备的？ - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

大家好，欢迎来到今天的“移动设备身份鉴定：wp_is_mobile() 源码解剖大会”。我是你们的解剖师，今天咱们的目标是把 wp_is_mobile() 这个WordPress界的小网红扒个精光，看看它到底是怎么靠“闻”（User-Agent）来识人的。

准备好了吗？让我们开始吧！

一、初识 wp_is_mobile()：它的使命和用法

wp_is_mobile() 函数，顾名思义，就是用来判断当前访问者是不是用的手机或者平板电脑等移动设备的。这在开发响应式主题、插件时非常有用，可以根据设备类型展示不同的内容或应用不同的样式。

用法很简单，直接调用它，返回 true 就是移动设备，false 就是非移动设备（通常是桌面电脑）。

<?php
if ( wp_is_mobile() ) {
    echo '你正在使用移动设备浏览！';
} else {
    echo '你正在使用桌面设备浏览！';
}
?>

二、源码探秘：走进 wp_is_mobile() 的内心世界

好了，铺垫结束，现在让我们深入到 wp_is_mobile() 的源码中去，看看它到底是怎么实现的。wp_is_mobile() 函数位于 WordPress 的 wp-includes/functions.php 文件中。

function wp_is_mobile() {
    static $is_mobile;

    if ( isset( $is_mobile ) ) {
        return $is_mobile;
    }

    if ( empty( $_SERVER['HTTP_USER_AGENT'] ) ) {
        $is_mobile = false;
    } elseif ( strpos( $_SERVER['HTTP_USER_AGENT'], 'Mobile' ) !== false // many mobile devices (all iPhone, iPad, etc.)
        || strpos( $_SERVER['HTTP_USER_AGENT'], 'Android' ) !== false
        || strpos( $_SERVER['HTTP_USER_AGENT'], 'Silk/' ) !== false
        || strpos( $_SERVER['HTTP_USER_AGENT'], 'Kindle' ) !== false
        || strpos( $_SERVER['HTTP_USER_AGENT'], 'BlackBerry' ) !== false
        || strpos( $_SERVER['HTTP_USER_AGENT'], 'Opera Mini' ) !== false
        || strpos( $_SERVER['HTTP_USER_AGENT'], 'Opera Mobi' ) !== false ) {
            $is_mobile = true;
    } else {
        $is_mobile = false;
    }

    return $is_mobile;
}

这段代码虽然不长，但信息量挺大的。我们来逐行分析：

static $is_mobile;: 这行代码声明了一个静态变量 $is_mobile。静态变量的特点是，它的值在函数的多次调用之间会被保留。也就是说，wp_is_mobile() 函数只会进行一次设备类型判断，之后的结果会被缓存起来，避免重复计算，提高性能。
if ( isset( $is_mobile ) ) { return $is_mobile; }: 这部分是缓存机制的核心。如果 $is_mobile 已经被赋值（说明之前已经判断过了），就直接返回缓存的值，不再进行判断。
if ( empty( $_SERVER['HTTP_USER_AGENT'] ) ) { $is_mobile = false; }: 这里开始正式的判断逻辑。首先，它检查 $_SERVER['HTTP_USER_AGENT'] 是否为空。$_SERVER['HTTP_USER_AGENT'] 是一个 PHP 超全局变量，包含了客户端（浏览器）发送给服务器的 User-Agent 字符串。如果这个字符串为空，那就说明客户端没有发送 User-Agent，这种情况通常会被认为是桌面设备。
elseif ( strpos( $_SERVER['HTTP_USER_AGENT'], 'Mobile' ) !== false ... ) { $is_mobile = true; }: 这部分是判断移动设备的关键。它使用 strpos() 函数在 User-Agent 字符串中查找特定的关键词。如果找到了任何一个关键词，就认为它是移动设备。
- 'Mobile'：这是最常见的关键词，很多移动设备的 User-Agent 中都包含这个词。
- 'Android'：Android 设备的 User-Agent 中通常包含这个词。
- 'Silk/'：亚马逊 Kindle Fire 设备的 User-Agent 中包含这个词。
- 'Kindle'：亚马逊 Kindle 阅读器的 User-Agent 中包含这个词。
- 'BlackBerry'：黑莓设备的 User-Agent 中包含这个词。
- 'Opera Mini'：Opera Mini 浏览器的 User-Agent 中包含这个词。
- 'Opera Mobi'：Opera Mobile 浏览器的 User-Agent 中包含这个词。
else { $is_mobile = false; }: 如果 User-Agent 字符串不为空，并且没有找到任何一个移动设备关键词，那就认为它是桌面设备。

三、User-Agent 的奥秘：浏览器的身份证明

现在我们来聊聊 User-Agent 这个神秘的字符串。User-Agent 就像浏览器的身份证，它告诉服务器浏览器的类型、版本、操作系统等信息。

一个典型的 User-Agent 字符串可能长这样：

Mozilla/5.0 (iPhone; CPU iPhone OS 13_2_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Mobile/15E148 Safari/604.1

我们可以把它拆解一下：

Mozilla/5.0：这是一个历史遗留问题，几乎所有浏览器都会包含这个字符串。
(iPhone; CPU iPhone OS 13_2_3 like Mac OS X)：这部分说明了设备类型（iPhone）和操作系统（iOS 13.2.3）。
AppleWebKit/605.1.15：这是浏览器引擎。
(KHTML, like Gecko)：这也是一个历史遗留问题，表示兼容KHTML引擎。
Version/13.0.3：表示Safari浏览器的版本。
Mobile/15E148：这个关键词非常重要，它明确表明这是一个移动设备。
Safari/604.1：表示Safari浏览器的版本。

不同的浏览器和设备，User-Agent 字符串的格式和内容会有所不同。但是，通常都会包含一些关键信息，比如设备类型、操作系统、浏览器引擎、浏览器版本等。

四、wp_is_mobile() 的局限性：并非万无一失

虽然 wp_is_mobile() 函数在大多数情况下都能准确判断设备类型，但它也存在一些局限性：

依赖 User-Agent 字符串: wp_is_mobile() 完全依赖 User-Agent 字符串来判断设备类型。这意味着，如果 User-Agent 字符串被篡改，或者没有包含任何移动设备关键词，wp_is_mobile() 就可能判断错误。
User-Agent 字符串的可变性: User-Agent 字符串是可以被修改的。用户可以使用浏览器插件或者修改浏览器设置来伪装 User-Agent。例如，一个桌面浏览器可以伪装成移动设备浏览器，反之亦然。
无法识别所有移动设备: wp_is_mobile() 函数只检测了少数几个常见的移动设备关键词。如果出现了新的移动设备，或者某个移动设备的 User-Agent 没有包含任何关键词，wp_is_mobile() 就可能无法识别。
并非响应式设计的最佳实践: 依赖于 wp_is_mobile() 来进行内容适配并非现代响应式设计的推荐做法。CSS Media Queries 才是更好的选择，因为它基于屏幕尺寸和设备特性进行判断，更加灵活和准确。

五、进阶技巧：扩展 wp_is_mobile() 的能力

既然 wp_is_mobile() 有局限性，那我们有没有办法扩展它的能力呢？当然有！

添加更多的 User-Agent 关键词: 我们可以通过添加更多的 User-Agent 关键词来提高 wp_is_mobile() 的准确性。例如，可以添加一些平板电脑或者其他不常见移动设备的关键词。

function my_is_mobile() {
    static $is_mobile;

    if ( isset( $is_mobile ) ) {
        return $is_mobile;
    }

    if ( empty( $_SERVER['HTTP_USER_AGENT'] ) ) {
        $is_mobile = false;
    } elseif ( strpos( $_SERVER['HTTP_USER_AGENT'], 'Mobile' ) !== false
        || strpos( $_SERVER['HTTP_USER_AGENT'], 'Android' ) !== false
        || strpos( $_SERVER['HTTP_USER_AGENT'], 'Silk/' ) !== false
        || strpos( $_SERVER['HTTP_USER_AGENT'], 'Kindle' ) !== false
        || strpos( $_SERVER['HTTP_USER_AGENT'], 'BlackBerry' ) !== false
        || strpos( $_SERVER['HTTP_USER_AGENT'], 'Opera Mini' ) !== false
        || strpos( $_SERVER['HTTP_USER_AGENT'], 'Opera Mobi' ) !== false
        || strpos( $_SERVER['HTTP_USER_AGENT'], 'iPad' ) !== false // 添加 iPad 的关键词
        || strpos( $_SERVER['HTTP_USER_AGENT'], 'iPod' ) !== false // 添加 iPod 的关键词
    ) {
        $is_mobile = true;
    } else {
        $is_mobile = false;
    }

    return $is_mobile;
}

注意： 不要直接修改 wp_is_mobile() 函数，而是创建一个新的函数，比如 my_is_mobile()，并在你的主题或插件中使用它。

使用插件: 有一些 WordPress 插件可以提供更强大的设备检测功能。这些插件通常会使用更复杂的算法和数据库来识别设备类型。
结合 CSS Media Queries: 最好的方式是将 wp_is_mobile() 与 CSS Media Queries 结合使用。wp_is_mobile() 可以用于一些服务器端的逻辑判断，而 CSS Media Queries 则用于客户端的样式适配。

六、替代方案：CSS Media Queries 的优雅之道

正如前面提到的，CSS Media Queries 是一种更现代、更灵活的设备适配方式。它允许我们根据屏幕尺寸、设备像素比、设备方向等条件来应用不同的 CSS 样式。

一个简单的 Media Query 示例：

/* 针对小屏幕设备（比如手机） */
@media (max-width: 767px) {
    body {
        font-size: 14px;
    }
    .menu {
        display: none; /* 隐藏桌面菜单 */
    }
    .mobile-menu {
        display: block; /* 显示移动菜单 */
    }
}

/* 针对中等屏幕设备（比如平板电脑） */
@media (min-width: 768px) and (max-width: 991px) {
    body {
        font-size: 16px;
    }
}

/* 针对大屏幕设备（比如桌面电脑） */
@media (min-width: 992px) {
    body {
        font-size: 18px;
    }
}

Media Queries 的优点：

基于屏幕尺寸和设备特性: Media Queries 基于屏幕尺寸和设备特性进行判断，而不是依赖 User-Agent 字符串，因此更加准确和可靠。
灵活性: Media Queries 允许我们根据不同的屏幕尺寸和设备特性应用不同的样式，从而实现更精细的适配。
性能: Media Queries 在客户端执行，不会增加服务器的负担。

七、总结：选择适合你的武器

wp_is_mobile() 是一个简单易用的函数，可以在大多数情况下准确判断设备类型。但是，它也存在一些局限性。在实际开发中，我们需要根据具体的需求选择合适的设备适配方案。

特性	`wp_is_mobile()`	CSS Media Queries
判断依据	User-Agent	屏幕尺寸、设备特性
执行位置	服务器端	客户端
灵活性	较低	较高
准确性	依赖 User-Agent	较高
适用场景	服务器端逻辑判断	样式适配
推荐程度	一般	强烈推荐

如果只需要在服务器端进行一些简单的设备类型判断，比如根据设备类型加载不同的模板文件，可以使用 wp_is_mobile()。
如果需要进行精细的样式适配，或者需要支持各种不同的设备，应该使用 CSS Media Queries。
最好的方式是将 wp_is_mobile() 与 CSS Media Queries 结合使用，充分发挥两者的优势。

八、最后的忠告：拥抱响应式设计

在移动互联网时代，响应式设计已经成为主流。我们应该拥抱响应式设计，使用 CSS Media Queries 等技术，让我们的网站和应用能够自动适应各种不同的设备，为用户提供最佳的浏览体验。

好了，今天的“移动设备身份鉴定：wp_is_mobile() 源码解剖大会”到此结束。希望大家通过今天的学习，能够更深入地理解 wp_is_mobile() 函数的原理和局限性，并能够选择合适的设备适配方案。下次再见！

发表回复 取消回复

发表回复取消回复