मोबाइल उपकरणों का पता लगाने और उन्हें एक विशिष्ट विषय कैसे प्रस्तुत करें?

Question

मैं आगंतुकों को प्रस्तुत करने के लिए अपनी थीम का एक नया संशोधित संस्करण बनाना चाहता हूं (मेरी प्रोफाइल की जांच करें) यदि मैं यह पता लगाता हूं कि वे एक हाथ से पकड़े हुए डिवाइस से साइट का दौरा कर रहे हैं, जैसे कि आईफोन, एंड्रॉइड, आदि।

1. मोबाइल डिवाइस / ब्राउज़र से अनुरोध आ रहा है तो कैसे पता करें?
2. मैं उन्हें एक समर्पित थीम कैसे लोड और प्रस्तुत कर सकता हूं?

अधिक जानकारी : मेरा विषय तरल नहीं है। इसकी एक निश्चित चौड़ाई 976px (676px सामग्री + बाकी साइडबार है)। मैं थीम में क्रांति नहीं करना चाहता, लेकिन मुझे लगता है कि यह 320x480 और 800x480 फोन के लिए बड़ी है। संभवतः मैं साइडबार को हटा दूंगा या कम से कम इसे सही करने के लिए स्थानांतरित करूंगा और अन्य छोटे समायोजन करूंगा।

Answer 1

अन्य लोगों की तरह, मैं अत्यधिक WPTouch का उपयोग करने की सलाह देता हूं। हालाँकि, यह अन्य वेबसाइट स्वरूपों की तुलना में ब्लॉग्स को सपोर्ट करने के लिए अधिक बनाया गया है, इसलिए मुझे पता है कि यह मोबाइल समाधानों का रामबाण नहीं है (मैं अपने पोर्टफोलियो को वर्डप्रेस के साथ-साथ अपने ब्लॉग पर भी चलाता हूं, और मेरा पोर्टफोलियो ****WPTouch में जैसा दिखता है )।

इसलिए मैंने उन प्रासंगिक अंशों को खोजने के लिए कोड पर एक नज़र डाली, जिन्हें आपको मोबाइल ब्राउज़र का पता लगाने के लिए उपयोग करने की आवश्यकता होगी। सबसे पहले, जैसा कि जान फेब्री ने उल्लेख किया है, मोबाइल ब्राउज़र उपयोगकर्ता एजेंटों की एक सूची है। 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सही पर सेट है या नहीं । यदि यह है, तो वर्डप्रेस आपके मोबाइल स्टाइलशीट, आपके मोबाइल थीम और मोबाइल थीम / पेज टेम्पलेट का उपयोग आपकी थीम के लिए डिफ़ॉल्ट के बजाय करेगा। मूल रूप से, आप वर्डप्रेस के डिफ़ॉल्ट व्यवहार को ओवरराइड कर रहे हैं, जिसके आधार पर कि ब्राउज़र का उपयोग किया जा रहा है या नहीं, आपके "उपयोगकर्ता ब्राउज़र" की सूची से मेल खाता है।

WPTouch में मोबाइल थीम को बंद करने की क्षमता भी शामिल है - जब आप एक iPhone पर WPTouch साइट पर जाते हैं, तो नीचे एक बटन होता है जो आपको सामान्य रूप से साइट देखने की अनुमति देता है। आप इस पर विचार करना चाह सकते हैं क्योंकि आप अपने समाधान का निर्माण करते हैं।

अस्वीकरण: उपरोक्त सभी कोड WPTouch संस्करण 1.9.19.4 के लिए स्रोत से बाहर कॉपी किया गया था और GPL के तहत संरक्षित है। यदि आप कोड का फिर से उपयोग करते हैं, तो आपके सिस्टम को GPL की शर्तों का भी पालन करना चाहिए। मैंने यह कोड नहीं लिखा था।

Comments

क्या यह डिफ़ॉल्ट UA सूची है? कोई ओपेरा मिनी या ओपेरा मोबाइल नहीं? अजीब।

— FUXIA

वह UA सूची सीधे स्रोत कोड से बाहर है ... बस याद रखें, हालांकि, WPTouch 2.0 एक प्रीमियम प्लग-इन है जिसे आपको BraveNewCode से खरीदना होगा । मैंने अभी तक इसके लिए स्रोत को नहीं देखा है, इसलिए इसमें एक अद्यतन UA सूची हो सकती है।

— एमान

Answer 2

आप यह देखना चाहते हैं कि यह बहुत लोकप्रिय WPtouch प्लगइन कैसे करता है। यह "iPhone, iPod टच, Android, ओपेरा मिनी, पाम प्री, सैमसंग टच और ब्लैकबेरी स्टॉर्म / मशाल मोबाइल उपकरणों" के लिए एक अलग विषय देता है । मुझे उनके स्रोत कोड में उपयोगकर्ता एजेंटों की एक सूची दिखाई देती है , यही शायद कुंजी है।

एक अन्य प्लगइन, WP-Wurfled , व्यापक वायरलेस यूनिवर्सल रिसोर्स फ़ाइल डेटाबेस का उपयोग करता है । मोबाइल उपकरणों के लगातार अद्यतन किए गए डेटाबेस में बहुत अधिक क्षमता की जानकारी होती है , इसलिए आप सर्वर-साइड डिवाइस के स्क्रीन रिज़ॉल्यूशन को जानते हैं, चाहे वह फ्लैश का समर्थन करता हो, ...

template_redirectकार्रवाई हुक अक्सर, कस्टम विषयों लोड करने के लिए प्रयोग किया जाता है यह लगभग एक असली टेम्पलेट फ़ाइल से पहले अंतिम क्षण शामिल किया गया है के रूप में ( template_includeपिछले हुक, लेकिन यह एक फिल्टर है)।

Answer 3

सवाल का जवाब नहीं देने के जोखिम पर, मैं ऐसा नहीं करने की सलाह दूंगा।

मैं महीनों से iOS उपकरणों का उपयोग कर रहा हूं, और जब मैंने अपना आईपैड खरीदा था, तो मैंने पहली बार सीएसएस लेआउट के साथ आने की कोशिश की थी, जो इस्तेमाल किए गए डिवाइस के आधार पर अपने व्यवहार को बदल देता था (और, मूल रूप से, स्क्रीन ओरिएंटेशन )।

लेखन के समय, यह मेरे देव स्थल (http://dev.semiologic.com/) पर चल रहा है। यदि आप इसे आईओएस डिवाइस पर टेस्ट करते हैं, तो आप ध्यान देंगे कि लेआउट आईपैड पर साइडबार के साथ एक कॉलम से स्विच करता है, जो आईफोन पर आधारित एकल कॉलम के साथ होता है। (साइडबार दो कॉलम में बिछाए जाते हैं, और नीचे के बक्से को नीचे दो कॉलम में रखा गया है।) आप ब्राउज़र की चौड़ाई को कम करके, सफारी के उपयोग से होने वाले प्रभाव को पुन: उत्पन्न कर सकते हैं।

वैसे भी, जितना मज़ा कार्यक्रम करने के लिए था, यह अंततः मेरे लिए हुआ, कम से कम आईओएस उपकरणों पर, मोबाइल-अनुकूलित लेआउट ने चीजों को बदतर बना दिया, बेहतर नहीं। सफारी मोबाइल का बिल्ट-इन ज़ूम इतना है कि जब तक आपका मुख्य कॉलम 480px चौड़ा है, तब तक आपकी साइट मोबाइल उपयोग के लिए पहले से ही अनुकूलित है। एक 720px व्यापक लेआउट के लिए एक 240px चौड़ी साइडबार जोड़ें, और आपकी साइट फिट और सभी में बहुत अच्छी लगती है:

• 1024x768 (iPad परिदृश्य)
• 768x1024 (iPad पोर्ट्रेट)
• 800x600 (खराब दृष्टि वाले उपयोगकर्ता)
• 480x320 (iPhone परिदृश्य)
• 320x480 (iPhone पोर्ट्रेट, ऑटो-जूम किकिंग के साथ)

500px + 250px भी काम करता है यदि आपके पास कुछ ऐसा है जो 750px योग करता है, यदि आप सफारी मोबाइल के अंतर्निहित ज़ूम को ध्यान में रखते हैं। साइट अभी भी अच्छी लगेगी और लैंडस्केप और पोर्ट्रेट मोड दोनों में iPhones पर पूरी तरह से पठनीय होगी।

किसी भी दर पर, अपने प्रश्न पर वापस आते हुए, परीक्षण से पता चला कि एक चीज़ जो आपको नहीं करनी चाहिए, वह है एक लचीली चौड़ाई के साथ एक लेआउट का उपयोग करना। (संयोग से, WP- टच सिर्फ तब तक करेगा जब तक कि मैं गलत नहीं हूं।) ऐसा करने से सब-इष्टतम ज़ूमिंग होती है। IPad पर, आप 480px चौड़े कॉलम में विवश किसी चीज़ पर ज़ूम कर सकते हैं, जिससे बड़े टेक्स्ट आकार की अनुमति मिलती है; कुछ ऐसा जो आपकी स्क्रीन की चौड़ाई में "समायोजित" हो, आपको छोटे पाठ, या क्षैतिज स्क्रॉल पढ़ने के लिए मजबूर करता है यदि यह आराम से पढ़ने के लिए बहुत छोटा है ...

Comments

सुझाव के लिए धन्यवाद। मेरी साइट तरल नहीं है, लेकिन इसकी एक निश्चित चौड़ाई 976px (676px सामग्री + बाकी साइडबार है)। मैं थीम में क्रांति नहीं करना चाहता, लेकिन मुझे लगता है कि यह 320x480 और 800x480 फोन की चौड़ाई के लिए है। संभवतः मैं साइडबार को हटा दूंगा या कम से कम इसे सही करने के लिए स्थानांतरित करूंगा।

— ड्रेक

मैंने जो देखा है, उससे मैं 100% सहमत हूं। बहुत कम अपवादों के साथ, "मोबाइल थीम" - बहुत कम से कम, "मोबाइल विषय" प्लग-इन बाहर - चूसना, और मोबाइल पर मूल साइट को नेविगेट करने की तुलना में उपयोग करना कठिन है। यद्यपि यदि आप अपनी साइट के मोबाइल संस्करण का प्रयास करने और बनाने के लिए पर्याप्त देखभाल करते हैं, तो इसे एक स्टाइलशीट ट्विक की बजाय एक पूर्ण रीडिज़ाइन के रूप में सोचें।

— गोल्डनएप्पल्स

Answer 4

सरल: wp_is_mobile()परीक्षण करने के लिए उपयोग करें - यह सभी मोबाइल उपकरणों (स्मार्ट फोन, टैबलेट, आदि) के trueलिए ट्रिगर होगा ।

अद्यतन करें

कृपया ऐसा न करें। यह विश्वसनीय काम नहीं करता है।

Answer 5

यह एक बहुत अच्छी स्क्रिप्ट है अगर आप इसे अनुकूलित करना चाहते हैं, तो वर्डप्रेस में एकीकृत करना आसान है। http://detectmobilebrowsers.mobi/

एक बात ध्यान देने की है कि ज्यादातर iPhone, एंड्रायड, या देशी ब्राउज़र सपोर्ट वाले मोबाइल फोन यूजर्स अपने आप री-डायरेक्ट नहीं होना चाहते हैं!

यह बुरा अभ्यास है, उन्हें मोबाइल संस्करण के लिंक के माध्यम से एक विकल्प दें और मोबाइल संस्करण में उन्हें मूल साइट पर वापस जाने का विकल्प दें।

मैं दोहराता हूं कि आपके उपयोगकर्ताओं को तब तक स्वचालित रूप से फिर से निर्देशित नहीं किया जाता है जब तक कि आपका भवन मोबाइल के लिए बहुत विशिष्ट न हो, या आपके पास पुराने ब्राउज़र समर्थन (अप्रभावित) वाले पुराने फोन से ट्रैफ़िक न हो।

• जोड़ना चाहते थे, यह बताने का एक आसान तरीका कि यह आपके सर्वर लॉग के माध्यम से कितना महत्वपूर्ण है।

Comments

दोनों संस्करणों पर स्विच विकल्पों की पेशकश करने के लिए अच्छा अवलोकन। कभी-कभी आप एक गैर-मोबाइल ब्राउज़र पर होते हैं, लेकिन एक धीमे कनेक्शन पर (सेलुलर मॉडेम, खराब वाईफाई, डायलअप, ...) के माध्यम से, और एक मोबाइल-अनुकूलित संस्करण पसंद करते हैं क्योंकि यह (सामान्य रूप से) छोटा होता है।

— जन फैब्री

Answer 6

मैं एक वैकल्पिक दृष्टिकोण जोड़ूंगा।

हो सकता है कि आप बहुत विशिष्ट आवश्यकताओं के अनुसार सभी शैली और व्यवहार को हस्तकला और बारीक करना चाहते हैं।

मैं हाल ही में किया था: यदि IE9 एक बात है, अगर iPhone एक दूसरा, अगर आईपैड तीसरा और इतने पर ... और क्रिस 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";