如何检测移动设备并呈现特定的主题？

#1 楼

像大多数其他人一样，我强烈建议使用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 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;
        }       
    }
}

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

WPTouch还具有关闭“移动主题-当您在iPhone上访问WPTouch网站时，底部有一个按钮可以让您正常查看该网站。在构建自己的解决方案时，您可能需要考虑这一点。

免责声明：以上所有代码均已从WPTouch 1.9.19.4版的源代码中复制并受GPL保护。如果您重复使用该代码，则您的系统还必须遵守GPL的条款。我没有编写此代码。

#2 楼

您可能想看看非常流行的WPtouch插件如何做到这一点。它为“ iPhone，iPod touch，Android，Opera Mini，Palm Pre，Samsung touch和BlackBerry Storm / Torch移动设备”提供了不同的主题。我在其源代码中看到了用户代理列表，这可能是关键。

另一个插件WP-Wurfled使用了广泛的Wireless Universal Resource File数据库。这个不断更新的移动设备数据库还包含许多功能信息，因此您知道服务器端设备的屏幕分辨率，是否支持Flash，...

template_redirect操作挂钩经常用于加载自定义主题，因为它几乎是包含真实模板文件之前的最后一刻（template_include是最后一个钩子，但这是一个筛选器）。

#3 楼

冒着不回答问题的危险，我建议您不要这样做。旨在尝试根据使用的设备（以及最初的屏幕方向）来更改其行为的CSS布局。 ：//dev.semiologic.com/）。如果在iOS设备上进行测试，您会注意到布局从iPad上带有侧边栏的一列切换到基于iPhone的只有一列的一列。 （侧栏分为两列，而底部的框则位于下面的两列。）您可以使用Safari通过减小浏览器的宽度来再现效果。最终是因为编程，至少在iOS设备上，针对移动设备进行了优化的布局使情况变得更糟，而不是更好。 Safari mobile内置的缩放功能使您只要主栏宽为480px，您的网站就已经针对移动应用进行了优化。添加一个240像素宽的侧边栏，以实现720像素宽的布局，您的网站将适合所有情况，并且看起来很棒： > 800x600（视力不佳的用户）
480x320（iPhone横向）
320x480（iPhone人像，具有自动缩放功能）

500px + 250px也可以使用d如果您考虑了Safari移动设备的内置缩放功能，则希望总像素为750像素。该网站仍然看起来不错，并且在横向和纵向模式下都可以在iPhone上完美读取。

无论如何，回到您的问题，测试表明您不应该做的一件事就是使用具有灵活宽度的布局。 （顺便说一句，除非我误会，否则WP-touch会做到这一点。）这样做会导致次佳缩放。在iPad上，您可以放大限制在480像素宽的列中的内容，以允许更大的文本尺寸；会“调整”到屏幕宽度的东西会迫使您阅读细小的文本，或者如果文本太小而无法舒适地阅读，则水平滚动...

#4 楼

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

更新

请不要这样做。它不能可靠运行。

#5 楼

如果要自定义脚本，这是一个非常不错的脚本，可以轻松集成到wordpress中。或具有本机浏览器支持的手机用户不希望被自动重定向！

这是一种不好的做法，请通过移动版本的链接给他们一个选择，而在移动版本中给他们一个选择来返回原始站点的选择。

我再说一遍，除非您针对移动设备构建了非常特定的功能，或者您有来自不支持本机浏览器的旧手机带来的流量（不太可能），否则请不要自动重定向用户。


想要添加，一种简单的方法来说明其重要性是通过服务器日志。

#6 楼

我将添加另一种方法。

也许您想根据非常特定的需求对所有样式和行为进行手工和微调。

我最近不得不：如果使用IE9事情，如果iPhone是第二个，iPad是第三个，依此类推...
并使用了Chris Schuld的Browser.php类，效果很好。示例：

require_once('Browser.php');
$browser_check = new Browser();
$browser_agent = $browser_check->getBrowser();
$browser_version = $browser_check->getVersion();

function browser_check($what) {
    global $browser_agent, $browser_version;
    switch ($what) {
        case 'version':
            return $browser_version;
        break;
        case 'ie':
            if ($browser_agent==Browser::BROWSER_IE) return true;
            else return false;
        break;
        case 'mobile':
            if ($browser_agent==Browser::BROWSER_ANDROID || $browser_agent==Browser::BROWSER_IPOD || $browser_agent==Browser::BROWSER_IPHONE) return true;
            else return false;          
        break;
        case 'ipad':
            if ($browser_agent==Browser::BROWSER_IPAD) return true;
            else return false;          
        break;
        default:
            return false;
        break;
    }
}

echo "Browser Version: " . browser_check('version');

if ( browser_check('ie') ) echo "Using Internet Explorer - print proper CSS";

if ( browser_check('mobile') ) echo "Using iPhone, iPod or Android - print proper JAVASCRIPT";

if ( browser_check('ipad') ) echo "Using iPad - print proper PHP";