如何检测移动设备并向他们呈现一个特定的主题？

问题描述

我想创建一个我的主题的新修改版本 (如果需要，请检查我的个人资料) 如果我检测到他们正在从 hand-held 设备 (如 iPhone，Android 等) 访问该网站，则向访问者呈现。

如何检测请求是否来自移动设备/浏览器？
我如何加载和呈现他们一个专门的主题？

更多信息：我的主题不流畅。它的固定宽度约为 976px(676px 内容+休息是左边栏) 。我不想革新主题，但我觉得 320×480 和 800×480 手机是大的。可能我会删除侧边栏，或者至少将其移动到右边，并进行其他小的调整。

最佳解决方案

像大多数人一样，我强烈推荐使用 WPTouch 。但是，它比其他网站格式更多地支持博客，所以我知道这不是移动解决方案的灵丹妙药 (我在 WordPress 以及我的博客上运行我的投资组合，我的投资组合看起来像 WPTouch 中的****) 。

所以我看了一下代码，找到你需要用来复制移动浏览器检测的相关部分。首先，如 Jan Fabry 所述，是移动浏览器用户代理的列表。 WPTouch 包含默认列表，还允许您使用设置或使用称为 wptouch_user_agents 的过滤器添加自定义用户代理：

function bnc_wptouch_get_user_agents() {
    $useragents = array(
        "iPhone",                                // Apple iPhone
        "iPod",                                  // Apple iPod touch
        "Android",                               // 1.5+ Android
        "dream",                                 // Pre 1.5 Android
        "CUPCAKE",                               // 1.5+ Android
        "blackberry9500",                        // Storm
        "blackberry9530",                        // Storm
        "blackberry9520",                        // Storm v2
        "blackberry9550",                        // Storm v2
        "blackberry9800",                        // Torch
        "webOS",                                 // Palm Pre Experimental
        "incognito",                             // Other iPhone browser
        "webmate",                               // Other iPhone browser
        "s8000",                                 // Samsung Dolphin browser
        "bada"                                   // Samsung Dolphin browser
    );

    $settings = bnc_wptouch_get_settings();
    if ( isset( $settings['custom-user-agents'] ) ) {
        foreach( $settings['custom-user-agents'] as $agent ) {
            if ( !strlen( $agent ) ) continue;

            $useragents[] = $agent;
        }
    }

    asort( $useragents );

    // WPtouch User Agent Filter
    $useragents = apply_filters( 'wptouch_user_agents', $useragents );

    return $useragents;
}

插件的肉是一个类：

class WPtouchPlugin {
    var $applemobile;
    var $desired_view;
    var $output_started;
    var $prowl_output;
    var $prowl_success;

    ...

插件的构造函数 (function WPtouchPlugin()) 首先向 plugins_loaded 钩子添加一个动作，以检测移动浏览器的用户代理，并将 $applemobile 设置为 true 。具体功能如下：

function detectAppleMobile($query = '') {
    $container = $_SERVER['HTTP_USER_AGENT'];

    $this->applemobile = false;
    $useragents = bnc_wptouch_get_user_agents();
    $devfile =  compat_get_plugin_dir( 'wptouch' ) . '/include/developer.mode';
    foreach ( $useragents as $useragent ) {
        if ( preg_match( "#$useragent#i", $container ) || file_exists( $devfile ) ) {
            $this->applemobile = true;
        }
    }
}

现在，该插件知道您使用的是移动浏览器 (根据浏览器的用户代理) 。插件的下一个部分是一组过滤器：

if ( strpos( $_SERVER['REQUEST_URI'], '/wp-admin' ) === false ) {
    add_filter( 'stylesheet', array(&$this, 'get_stylesheet') );
    add_filter( 'theme_root', array(&$this, 'theme_root') );
    add_filter( 'theme_root_uri', array(&$this, 'theme_root_uri') );
    add_filter( 'template', array(&$this, 'get_template') );
}

这些过滤器中的每一个调用一个方法来检查 $applemoble 是否设置为 true 。如果是，则 WordPress 将使用您的移动样式表，您的移动主题和移动的帖子/页面模板，而不是主题的默认模板。基本上，您是否基于使用的浏览器是否具有与您的 “移动浏览器” 列表相匹配的用户代理，将 WordPress 的默认行为覆盖。

WPTouch 还包括关闭移动主题的功能 – 当您在 iPhone 上访问 WPTouch 站点时，底部有一个按钮可让您正常浏览该站点。您可能希望在构建自己的解决方案时考虑这一点。

免责声明：以上所有代码均从 WPTouch version 1.9.19.4 的源代码复制出来，并受 GPL 的保护。如果你的代码是 re-use，你的系统也必须符合 GPL 的条款。我没有写这段代码。

次佳解决方案

你可能想看看 the very popular WPtouch plugin 是如何做到的。它为 “iPhone，iPod touch，Android，Opera Mini，Palm Pre，Samsung Touch 和 BlackBerry Storm / Torch 移动设备” 提供了不同的主题。我看到 a list of user agents in their source code，这可能是关键。

另一个插件 WP-Wurfled 使用广泛的 Wireless Universal Resource File 数据库。这款移动设备的 constantly-updated 数据库还包含很多 capability info，所以你知道 server-side 的设备的屏幕分辨率，不管它是否支持 Flash，…

template_redirect 动作钩通常用于加载自定义主题，因为它几乎是包含真实模板文件之前的最后一刻 (template_include 是最后一个钩子，但这是一个过滤器) 。

第三种解决方案

有没有回答这个问题的风险，我建议不要这样做。

我已经使用 iOS 设备了好几个月了，而且当我购买 iPad 时，我重新开始的第一件事就是尝试提出 CSS 布局，根据使用的设备改变其行为 (最初是屏幕方向) 。

在撰写本文时，它正在我的开发工具 (http://dev.semiologic.com/) 上运行。如果您在 iOS 设备上进行测试，您会注意到，布局从 iPad 上的侧边栏的列切换到基于 iPhone 的单列。 (侧栏布置在两列中，底部框放置在下面的两列中。) 您可以通过减少浏览器的宽度来使用 Safari 重现效果。

无论如何，像程序一样有趣，最终发生在我身上，至少在 iOS 设备上，mobile-optimized 布局使事情变得更糟，而不是更好。 Safari 手机的 built-in 缩放是这样的，只要您的主列宽为 480 像素，您的网站已经针对移动使用进行了优化。为宽 720px 的布局添加一个 240px 宽的边栏，您的网站适合并看起来很棒：

1024×768(iPad 风景)
768×1024(iPad 肖像)
800×600(视力不佳的用户)
480×320(iPhone 风景)
320×480(iPhone 肖像，搭配 auto-zoom)

如果您希望使用总共为 750 像素的东西，如果您将 Safari 手机的 built-in 放大镜考虑在内，那么 500px + 250px 也可以正常工作。该网站仍然会看起来不错，并且在风景和肖像模式下在 iPhone 上完美可读。

无论如何，回到你的问题，测试显示你不应该做的一件事是使用宽度宽的布局。 (顺便说一下，WP-touch 会做到这一点，除非我错了。) 这样做导致 sub-optimal 缩放。在 iPad 上，您可以放大 480 像素宽的列，限制大文字大小; “adjusts” 到你的屏幕宽度的一些东西会强制你读取小文本，或者如果太小而无法轻松读取，则可以是水平滚动…

第四种方案

简单：使用 wp_is_mobile()测试 – 它将触发所有移动设备 (智能手机，平板电脑等) 的 true 。

Update

请不要这样做。它不可靠。

参考文献

How to detect mobile devices and present them a specific theme?

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。

如何检测移动设备并向他们呈现一个特定的主题？