分析 WordPress `wp_is_mobile()` 函数源码：基于 `User-Agent` 的移动设备判断。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位观众老爷们，掌声响起来！今天咱们来聊聊WordPress里一个经常被误解，但又非常实用的函数——wp_is_mobile()。别看它名字简单，背后可是藏着不少关于移动设备识别的门道。咱们这次就扒开它的源码，看看它是如何通过User-Agent来判断用户的设备的，以及这种方法有哪些局限性，最后再来聊聊如何更优雅地搞定移动设备适配。

开场白：User-Agent，你的身份证明

想象一下，你走进一家酒吧，想点一杯特调鸡尾酒。酒保问你：“您想喝点什么？” 你说：“给我来一杯‘我想要在移动设备上优雅展示’的鸡尾酒！” 酒保一脸懵逼。

这时候，你需要出示你的“身份证明”——你的User-Agent。 User-Agent就像浏览器给服务器的一张名片，告诉服务器你是谁，用的什么浏览器，操作系统是什么等等。

比如，一个典型的User-Agent可能是这样的：

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

看到了吗？这里面包含了设备类型（iPhone）、操作系统（iOS 15.0）、浏览器引擎（WebKit）等等信息。

wp_is_mobile()：一个简单的判断器

现在，让我们来看看wp_is_mobile()这个小家伙是怎么工作的。它的核心思想很简单：检查User-Agent字符串中是否包含特定的关键词。

源码（WordPress 6.4.2）：

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; 利用静态变量，wp_is_mobile()只会执行一次判断，结果会被缓存起来，下次调用直接返回缓存值，提高了效率。
检查User-Agent： $_SERVER['HTTP_USER_AGENT'] 获取User-Agent字符串。如果为空，直接返回false，表示不是移动设备。
关键词匹配： 通过strpos()函数，检查User-Agent字符串中是否包含Mobile、Android、Silk/、Kindle、BlackBerry、Opera Mini、Opera Mobi等关键词。如果包含其中任何一个，就认为它是移动设备，返回true。

wp_is_mobile()的优缺点：

优点：

简单粗暴： 实现简单，代码量少，容易理解。
兼容性好： 在WordPress早期版本中，这种方法是唯一可用的选择。

缺点：

容易被欺骗： User-Agent是可以被修改的。用户可以伪装成移动设备访问网站，导致wp_is_mobile()判断错误。
关键词列表不完整： 移动设备种类繁多，User-Agent千奇百怪，wp_is_mobile()的关键词列表不可能覆盖所有情况。一些新型移动设备可能无法被正确识别。
无法区分平板电脑和手机： wp_is_mobile()只能判断是否是移动设备，无法区分是手机还是平板电脑。

举例说明：

正常情况： 用iPhone访问网站，User-Agent包含Mobile关键词，wp_is_mobile()返回true。
被欺骗的情况： 用电脑浏览器，通过开发者工具修改User-Agent为包含Mobile关键词的字符串，wp_is_mobile()错误地返回true。
无法识别的情况： 一些新型的国产手机，User-Agent可能不包含wp_is_mobile()关键词列表中的任何一个，导致无法被识别。

User-Agent字符串的陷阱

User-Agent字符串充满了历史遗留问题和各种各样的hack。浏览器厂商为了兼容旧网站，会在User-Agent中添加各种各样的信息，导致User-Agent字符串变得越来越复杂，越来越难以解析。

例如，有些User-Agent字符串会同时包含Mobile和Desktop关键词，这让判断变得更加困难。

更优雅的解决方案：响应式设计和CSS Media Queries

既然wp_is_mobile()有这么多局限性，那么有没有更好的方法来搞定移动设备适配呢？答案是： 响应式设计和CSS Media Queries。

响应式设计： 是一种网页设计方法，旨在使网页能够在各种设备上都能呈现出最佳的视觉效果。它通过弹性布局、弹性图片和CSS Media Queries等技术，自动调整网页的布局和内容，以适应不同的屏幕尺寸和分辨率。
CSS Media Queries： 允许你根据设备的特性（如屏幕宽度、屏幕高度、分辨率、方向等）来应用不同的CSS样式。

CSS Media Queries的基本语法：

@media (条件) {
  /* 在满足条件时应用的CSS样式 */
}

例如，以下代码表示当屏幕宽度小于768像素时，应用背景颜色为红色：

@media (max-width: 768px) {
  body {
    background-color: red;
  }
}

常见的Media Queries：

Media Query	描述
`max-width`	最大宽度。当屏幕宽度小于或等于指定值时，应用样式。
`min-width`	最小宽度。当屏幕宽度大于或等于指定值时，应用样式。
`orientation: portrait`	纵向模式。当设备处于纵向模式时，应用样式。
`orientation: landscape`	横向模式。当设备处于横向模式时，应用样式。
`resolution`	分辨率。根据屏幕的分辨率应用样式。例如，`@media (min-resolution: 2dppx)`表示当屏幕分辨率大于或等于2dppx（每英寸像素数）时，应用样式。通常用于处理Retina屏幕等高分辨率设备。
`hover`	检查设备是否支持悬停效果。 `@media (hover: hover)` 表示设备支持悬停效果， `@media (hover: none)` 表示设备不支持悬停效果（例如，触摸屏设备）。

使用Media Queries的优势：

更精确： Media Queries基于设备的实际屏幕尺寸和分辨率来判断，比User-Agent更精确。
更灵活： Media Queries可以根据各种设备特性来应用不同的样式，实现更灵活的适配。
更可靠： Media Queries无法被用户修改，更加可靠。
面向未来： 随着新型设备的不断涌现，Media Queries可以更好地适应未来的发展。

例子：

假设我们要创建一个响应式的导航栏。在手机上，导航栏显示为一个汉堡菜单；在平板电脑和PC上，导航栏直接显示所有菜单项。

HTML结构：

<nav class="navbar">
  <div class="container">
    <a class="navbar-brand" href="#">My Website</a>
    <button class="navbar-toggler">☰</button>
    <ul class="navbar-menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</nav>

CSS样式：

.navbar {
  background-color: #f8f9fa;
  padding: 10px 0;
}

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 90%;
  margin: 0 auto;
}

.navbar-brand {
  font-size: 1.5rem;
  font-weight: bold;
}

.navbar-toggler {
  display: none; /* 默认隐藏汉堡菜单按钮 */
  font-size: 1.5rem;
  background: none;
  border: none;
  cursor: pointer;
}

.navbar-menu {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
}

.navbar-menu li {
  margin-left: 20px;
}

/* 在屏幕宽度小于768px时，显示汉堡菜单，隐藏导航菜单 */
@media (max-width: 768px) {
  .navbar-toggler {
    display: block; /* 显示汉堡菜单按钮 */
  }

  .navbar-menu {
    display: none; /* 隐藏导航菜单 */
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #f8f9fa;
    padding: 10px;
    text-align: center;
  }

  .navbar-menu li {
    margin: 0;
    padding: 10px;
    border-bottom: 1px solid #ddd;
  }

  /* JavaScript控制菜单的显示和隐藏 */
  .navbar-menu.active {
    display: flex;
  }
}

JavaScript代码 (控制汉堡菜单的显示与隐藏):

const toggler = document.querySelector('.navbar-toggler');
const menu = document.querySelector('.navbar-menu');

toggler.addEventListener('click', () => {
  menu.classList.toggle('active');
});

在这个例子中，我们使用max-width: 768px这个Media Query来判断是否是手机。当屏幕宽度小于768像素时，显示汉堡菜单，隐藏导航菜单；否则，显示导航菜单，隐藏汉堡菜单。

wp_is_mobile()的用武之地

虽然响应式设计是更好的选择，但wp_is_mobile()并非一无是处。在某些特定情况下，它仍然可以发挥作用。

例如：

统计分析： 可以使用wp_is_mobile()来统计网站的移动设备访问量。虽然不精确，但可以提供一个大致的趋势。
特定插件的兼容性： 有些老旧的WordPress插件可能依赖wp_is_mobile()来判断设备类型。为了保证兼容性，可能需要保留wp_is_mobile()的使用。
服务器端优化： 在某些情况下，可能需要在服务器端根据设备类型来做一些优化。例如，针对移动设备提供更小的图片，或者禁用某些耗费性能的功能。虽然不推荐，但在某些特殊情况下，wp_is_mobile()仍然可以作为一种快速的解决方案。

总结：

wp_is_mobile()是一个基于User-Agent的简单移动设备判断函数。它实现简单，但存在很多局限性。响应式设计和CSS Media Queries是更好的选择，可以更精确、更灵活地实现移动设备适配。在大多数情况下，应该优先选择响应式设计和CSS Media Queries。只有在特定情况下，才考虑使用wp_is_mobile()。

记住，不要过度依赖User-Agent。拥抱响应式设计，让你的网站在各种设备上都能优雅地展示！

好了，今天的讲座就到这里。感谢大家的观看！散会！记得点赞投币加关注哦！咱们下期再见！

发表回复 取消回复

发表回复取消回复