如何檢測移動設備並向他們呈現一個特定的主題？

問題描述

我想創建一個我的主題的新修改版本 (如果需要，請檢查我的個人資料) 如果我檢測到他們正在從 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 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

如何檢測移動設備並向他們呈現一個特定的主題？