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


31

我想创建主题的新修改版本(如果需要,请检查我的个人资料),以便在检测到访问者通过iPhone,Android等手持设备访问该站点时向其呈现。

  1. 如何检测请求是否来自移动设备/浏览器?
  2. 如何加载并呈现专用主题?

更多信息:我的主题不流畅。它具有约976px的固定宽度(676px的内容+其余部分位于左侧边栏)。我不想彻底改变主题,但我认为对于320x480和800x480手机来说,它太大了。可能我将移除侧边栏或至少将其向右移动并进行其他小的调整。

Answers:


19

像大多数其他人一样,我强烈建议使用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 1.9.19.4版的源代码中复制并受GPL保护。如果您重复使用该代码,则您的系统还必须遵守GPL的条款。 我没有写这段代码。


这是默认的UA列表吗?没有Opera Mini或Opera Mobile?奇怪。
福厦

那就是直接来自源代码的UA列表...不过,请记住,WPTouch 2.0是您必须从BraveNewCode购买的高级插件。我尚未查看其来源,因此它可能具有更新的UA列表。
EAMann

8

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

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

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


7

冒着不回答问题的风险,我建议不要这样做。

我使用iOS设备已经有几个月了,而当我购买iPad时,我做的第一件事就是尝试根据自己使用的设备(以及最初的屏幕方向)提出CSS布局来更改其行为)。

在撰写本文时,它正在我的开发站点(http://dev.semiologic.com/)上运行。如果在iOS设备上进行测试,您会注意到布局从iPad上带有侧边栏的一列切换到基于iPhone的只有一列的一列。(侧栏分为两列,而底部的框则位于底下的两列中。)您可以使用Safari通过减小浏览器的宽度来重现效果。

无论如何,就像编程一样有趣,最终我想到,至少在iOS设备上,针对移动设备进行了优化的布局使情况变得更糟,而不是更好。Safari mobile的内置缩放功能使您只要主栏宽为480px,您的网站就已经针对移动应用进行了优化。添加一个240像素宽的边栏,以获得720像素宽的版式,您的网站适合所有情况,看起来也很棒:

  • 1024x768(iPad横向)
  • 768x1024(iPad肖像)
  • 800x600(视力较差的用户)
  • 480x320(iPhone横向)
  • 320x480(iPhone人像,带有自动缩放功能)

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

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


感谢您的建议。我的网站不是流畅的,但固定宽度约为976px(内容为676px +其余部分在左侧边栏)。我不想彻底改变主题,但我感觉它的宽度是320x480和800x480手机的宽度。我可能会删除侧边栏或至少将其向右移动。
德雷克2010年

从我所见,我同意100%。除了极少数例外,“移动主题”(至少是其中的“移动主题”插件)很烂,而且比在移动设备上浏览原始网站更难使用。尽管如果您确实愿意尝试尝试并创建网站的移动版本,则可以将其视为完全重新设计,而不仅仅是调整样式表。
goldenapples 2010年

3

简单:使用wp_is_mobile()测试-这将触发true所有的移动设备(智能手机,平板电脑等)。

更新资料

不要那样做。它不能可靠地工作。


2

如果要自定义脚本,这是一个非常不错的脚本,可以轻松集成到wordpress中。 http://detectmobilebrowsers.mobi/

需要注意的一件事是,大多数具有本机浏览器支持的iphone,andriod或移动电话用户都不希望自动重定向!

这是不好的做法,请通过移动版本的链接为他们提供一个选项,而在移动版本中,可以给他们提供返回原始站点的选项。

重复一遍,除非您针对移动设备构建了非常特定的功能,或者您的流量来自不支持本机浏览器的旧手机(不太可能),否则请不要自动重定向用户。

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

很好的观察,两种版本都提供了开关选项。有时,您使用的是非移动浏览器,但连接速度较慢(通过蜂窝调制解调器,不良的Wifi,拨号等),并且更喜欢针对移动设备进行优化的版本,因为该版本通常也较小。
Jan Fabry

2

我将添加另一种方法。

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

我最近不得不:如果是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";
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.