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

时间:2010-11-10 作者:Drake

我想创建一个新的主题修改版本(如果需要,请检查我的个人资料),如果我检测到访问者是通过手持设备(如iPhone、Android等)访问该网站,我会向他们展示。

如何检测请求是否来自移动设备/浏览器More Info: 我的主题不是流畅的。它的固定宽度约为976px(676px内容+其余部分为左侧边栏)。我不想彻底改变这个主题,但我觉得它对于320x480和800x480手机来说太大了。也许我会删除侧边栏,或者至少将其向右移动并进行其他小调整。

6 个回复
SO网友:EAMann

像大多数其他人一样,我强烈建议使用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 为真。具体功能如下:

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网站时,底部有一个按钮,允许您正常查看该网站。您可能希望在构建自己的解决方案时考虑这一点。

Disclaimer: 以上所有代码都是从源代码中复制出来的WPTouch version 1.9.19.4 并受GPL保护。如果您重复使用该代码,您的系统还必须遵守GPL的条款I did not write this code.

SO网友:Jan Fabry

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

另一个插件,WP-Wurfled, 使用扩展Wireless Universal Resource File 数据库这个不断更新的移动设备数据库还包含许多capability info, 所以您知道服务器端设备的屏幕分辨率,是否支持Flash。。。

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

SO网友:Denis de Bernardy

At the risk of not answering the question, I\'d advise to not do so.

I\'ve been using iOS devices for months, and one of the first things I did back when I bought my iPad was to try to come up with CSS layout that changed its behavior based on the device used (and, originally, the screen orientation).

At the time of writing, it\'s running on my dev site (http://dev.semiologic.com/). If you test it on an iOS device, you\'ll note that the layout switches from a column with sidebars on the iPad, to one with a single column based on the iPhone. (The sidebars get laid out in two columns, and the bottom boxes are laid out in two columns underneath.) You can reproduce the effect using Safari, by reducing the browser\'s width.

Anyway, as fun as it was to program, it eventually occurred to me that, at least on iOS devices, the mobile-optimized layout made things worse, not better. Safari mobile\'s built-in zoom is so that, as long as your main column is 480px wide, your site is already optimized for mobile use. Add a 240px wide sidebar for a 720px wide layout, and your site fits and looks great in all:

  • 1024x768 (iPad landscape)
  • 768x1024 (iPad portrait)
  • 800x600 (users with poor eyesight)
  • 480x320 (iPhone landscape)
  • 320x480 (iPhone portrait, with the auto-zoom kicking in)

500px + 250px also works if you\'d rather have something that totals 750px, if you take the Safari mobile\'s built-in zoom into account. The site will still look good and be perfectly readable on iPhones in both landscape and portrait modes.

At any rate, getting back to your question, testing revealed that the one thing you should NOT do, is to use a layout with a flexible width. (Incidentally, WP-touch will do just that unless I\'m mistaking.) Doing so leads to sub-optimal zooming. On the iPad, you can zoom in on something constrained in a 480px wide column, allowing for larger text size; something that "adjusts" to your screen\'s width forces you to read tiny text, or horizontal scrolling if it\'s too small to read comfortably...

SO网友:kaiser

简单:使用wp_is_mobile() 测试-将触发true 对于all 移动设备(智能手机、平板电脑等)。

请更新do not 那样做。它工作不可靠。

SO网友:Wyck

如果你想自定义它,这是一个非常棒的脚本,很容易集成到wordpress中。http://detectmobilebrowsers.mobi/

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

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

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

想添加一个简单的方法,通过服务器日志来判断这有多重要

SO网友:brasofilo

我将添加另一种方法。

也许你想根据非常具体的需要手工制作和调整所有的风格和行为。

我最近不得不说:如果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";

结束

相关推荐

MobilePress无法翻译短码

几天前,我发布了我网站的移动版。看起来不错。我曾经mobilepress 同样如此。但我发现shortcodes 正在显示为简单文本。是否有其他插件可以构建高效的移动版本,包括短代码翻译