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

問題描述

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

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