কীভাবে মোবাইল ডিভাইসগুলি সনাক্ত করতে এবং সেগুলিকে একটি নির্দিষ্ট থিম উপস্থাপন করবেন?


31

আমি আমার থিমের একটি নতুন পরিবর্তিত সংস্করণ তৈরি করতে চাই (যদি প্রয়োজন হয় তবে আমার প্রোফাইল চেক করুন) যদি আমি সনাক্ত করি যে তারা আইফোন, অ্যান্ড্রয়েড ইত্যাদির মতো কোনও হ্যান্ড-হোল্ড ডিভাইস থেকে সাইটটি ভিজিট করছে if

  1. অনুরোধটি কোনও মোবাইল ডিভাইস / ব্রাউজার থেকে আসছে কিনা তা কীভাবে সনাক্ত করবেন?
  2. আমি কীভাবে তাদের উত্সর্গীকৃত থিমটি লোড এবং উপস্থাপন করতে পারি?

আরও তথ্য : আমার থিমটি তরল নয়। এটির প্রায় 976px একটি নির্দিষ্ট প্রস্থ রয়েছে (676px সামগ্রী + বিশ্রামটি বাম পাশের বারে রয়েছে)। আমি থিমটি বিপ্লব করতে চাই না তবে আমি মনে করি এটি 320x480 এবং 800x480 ফোনের জন্য বড় large সম্ভবত আমি সাইডবারটি সরিয়ে ফেলব বা কমপক্ষে এটি ডানদিকে নিয়ে যাব এবং অন্যান্য ছোট সামঞ্জস্য করব।

উত্তর:


19

অন্যান্য অন্যান্যদের মতো আমিও ডাব্লুপিটিচ ব্যবহার করার পরামর্শ দিচ্ছি। তবে এটি অন্যান্য ওয়েবসাইট ফর্ম্যাটের তুলনায় ব্লগগুলিকে সমর্থন করার জন্য আরও বেশি নির্মিত, তাই আমি জানি এটি মোবাইল সলিউশনের প্যানাসিয়া নয় (আমি আমার পোর্টফোলিওটি আমার ব্লগের পাশাপাশি চালাই এবং আমার পোর্টফোলিও ****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সত্য হিসাবে সেট করা আছে কিনা তা যাচাই করে । যদি তা হয়, তবে ওয়ার্ডপ্রেস আপনার থিমের জন্য ডিফল্টর পরিবর্তে আপনার মোবাইল স্টাইলশীট, আপনার মোবাইল থিম এবং একটি মোবাইল পোস্ট / পৃষ্ঠার টেম্পলেট ব্যবহার করবে। মূলত, আপনি ব্রাউজারের ডিফল্ট আচরণের উপর ভিত্তি করে ব্রাউজার ব্যবহার হচ্ছে কিনা তার ভিত্তিতে কোনও ব্যবহারকারী এজেন্ট রয়েছে যা আপনার "মোবাইল ব্রাউজারগুলির" তালিকার সাথে মেলে।

ডাব্লুপিছুতে মোবাইল থিমটি বন্ধ করার ক্ষমতাও অন্তর্ভুক্ত রয়েছে - আপনি যখন কোনও আইফোনটিতে ডাব্লুপিটচ সাইটটি দেখেন, নীচের অংশে একটি বোতাম রয়েছে যা আপনাকে সাইটটি সাধারণত দেখার সুযোগ দেয়। আপনি নিজের সমাধান তৈরি করার সময় আপনি এটি বিবেচনা করতে চাইতে পারেন।

দাবি অস্বীকার : উপরের সমস্ত কোড ডাব্লুপিটিউচ সংস্করণ 1.9.19.4 এর জন্য উত্স থেকে অনুলিপি করা হয়েছিল এবং জিপিএল এর আওতায় সুরক্ষিত রয়েছে। আপনি যদি কোডটি পুনরায় ব্যবহার করেন তবে আপনার সিস্টেমকে অবশ্যই জিপিএলের শর্তাদি মেনে চলতে হবে। আমি এই কোডটি লিখিনি।


এটি কি পূর্বনির্ধারিত ইউএ তালিকা? অপেরা মিনি বা অপেরা মোবাইল নেই? স্ট্রেঞ্জ।
ফুসিয়া

সোর্স কোডের বাইরে এটিই ইউএ তালিকা ... কেবলমাত্র মনে রাখবেন, ডাব্লুপিউচ ২.০ হ'ল একটি প্রিমিয়াম প্লাগ-ইন যা আপনাকে ব্র্যাভিনিউকোড থেকে কিনতে হবে । আমি এখনও এর জন্য উত্সটির দিকে নজর দিইনি, সুতরাং এটির আপডেট ইউএ তালিকা থাকতে পারে।
ইমন

8

খুব জনপ্রিয় WPtouch প্লাগইন এটি কীভাবে করে তা আপনি দেখতে চাইতে পারেন । এটি "আইফোন, আইপড টাচ, অ্যান্ড্রয়েড, অপেরা মিনি, পাম প্রি, স্যামসাং টাচ এবং ব্ল্যাকবেরি স্টর্ম / টর্চ মোবাইল ডিভাইস" এর জন্য আলাদা থিম দেয় । আমি তাদের উত্স কোডে ব্যবহারকারীর এজেন্টগুলির একটি তালিকা দেখছি , সম্ভবত এটিই মূল।

আরেকটি প্লাগইন, ডব্লিউপি-ওয়ারফ্লেড বিস্তৃত ওয়্যারলেস ইউনিভার্সাল রিসোর্স ফাইল ডাটাবেস ব্যবহার করে। মোবাইল ডিভাইসের এই ক্রমাগত আপডেট হওয়া ডাটাবেসেও প্রচুর সক্ষমতার তথ্য থাকে , যাতে আপনি ডিভাইসের স্ক্রিন রেজোলিউশনটিকে সার্ভার-সাইড জানেন, এটি ফ্ল্যাশ সমর্থন করে কিনা, ...

template_redirectকর্ম হুক প্রায়ই কাস্টম থিম লোড করতে ব্যবহৃত হয় এটা প্রায় একটি বাস্তব টেমপ্লেট ফাইল আগে শেষ মুহূর্ত অন্তর্ভুক্ত করা হয় হিসাবে ( template_includeহয় গত হুক, কিন্তু যে একটি ফিল্টার এর)।


7

প্রশ্নের উত্তর না দেওয়ার ঝুঁকিতে, আমি এটি না করার পরামর্শ দেব।

আমি কয়েক মাস ধরে আইওএস ডিভাইস ব্যবহার করছি এবং আমি যখন আমার আইপ্যাড কিনেছিলাম তখন প্রথম জিনিসগুলির মধ্যে একটি হ'ল সিএসএস লেআউট নিয়ে আসার চেষ্টা করা হয়েছিল যা ব্যবহৃত ডিভাইসের উপর ভিত্তি করে (এবং, মূলত, স্ক্রিন ওরিয়েন্টেশন) পরিবর্তন করেছে )।

লেখার সময় এটি আমার ডেভ সাইট (http://dev.semiologic.com/) এ চলছে। আপনি যদি এটি কোনও আইওএস ডিভাইসে পরীক্ষা করে থাকেন তবে আপনি নোট করবেন যে আইফোনটির উপর ভিত্তি করে আইকনটিতে সাইডবারগুলি সহ একটি কলাম থেকে লেআউটটি স্যুইচ করেছে। (সাইডবারগুলি দুটি কলামে বিভক্ত হয়ে যায় এবং নীচের বাক্সগুলি নীচে দুটি কলামে রাখা হয়)) আপনি ব্রাউজারের প্রস্থ কমিয়ে সাফারি ব্যবহার করে প্রভাবটি পুনরুত্পাদন করতে পারেন।

যাইহোক, প্রোগ্রামটি যতটা মজাদার ছিল, অবশেষে এটি আমার কাছে ঘটেছিল যে, কমপক্ষে আইওএস ডিভাইসে মোবাইল-অনুকূলিত লেআউটটি আরও খারাপ করেছে, আরও ভাল নয়। সাফারি মোবাইলের অন্তর্নির্মিত জুমটি এমন যে আপনার মূল কলামটি যতক্ষণ 480px প্রশস্ত হবে ততক্ষণ আপনার সাইটটি মোবাইল ব্যবহারের জন্য ইতিমধ্যে অনুকূলিত হয়েছে। একটি 720px প্রশস্ত লেআউটের জন্য একটি 240px প্রশস্ত সাইডবার যুক্ত করুন এবং আপনার সাইটটি ফিট করে এবং সর্বোত্তম দেখাচ্ছে:

  • 1024x768 (আইপ্যাড ল্যান্ডস্কেপ)
  • 768x1024 (আইপ্যাড প্রতিকৃতি)
  • 800x600 (দৃষ্টিশক্তি কম ব্যবহারকারী)
  • 480x320 (আইফোন ল্যান্ডস্কেপ)
  • 320x480 (স্বতঃ জুম লাথি দিয়ে আইফোন প্রতিকৃতি)

যদি আপনি সাফারি মোবাইলের অন্তর্নির্মিত জুমটিকে অ্যাকাউন্টে নেন, তবে আপনার কাছে মোট 750px মোট কিছু থাকে তবে 500px + 250px এছাড়াও কাজ করে। সাইটটি এখনও দুর্দান্ত দেখাবে এবং ল্যান্ডস্কেপ এবং প্রতিকৃতি উভয় ক্ষেত্রেই আইফোনে পুরোপুরি পঠনযোগ্য হবে।

যে কোনও হারে, আপনার প্রশ্নের দিকে ফিরে আসা, পরীক্ষার মাধ্যমে প্রমাণিত হয়েছিল যে এক জিনিস যা আপনার করা উচিত নয় তা হ'ল নমনীয় প্রস্থ সহ একটি বিন্যাস ব্যবহার করা। (প্রসঙ্গত, আমি ভুল করছি না যদি না ডাব্লুপি-টাচ কেবল তা করবে)) এটি করা উপ-অনুকূল জুমিংয়ের দিকে পরিচালিত করে। আইপ্যাডে, আপনি 480px প্রশস্ত কলামে বাধা আকারের কিছুতে বড় আকারের পাঠ্য আকারের জন্য জুম করতে পারেন; আপনার স্ক্রিনের প্রস্থে "সামঞ্জস্য" এমন কিছু আপনাকে ছোট ছোট পাঠ্য পড়তে বাধ্য করে, বা আরামদায়কভাবে পড়তে যদি খুব ছোট হয় তবে অনুভূমিক স্ক্রোলিং ...


পরামর্শের জন্য আপনাকে ধন্যবাদ। আমার সাইটটি তরল নয় তবে প্রায় 976px এর একটি নির্দিষ্ট প্রস্থ রয়েছে (676px সামগ্রী + বিশ্রামটি বাম পাশের বারে রয়েছে)। আমি থিমটি বিপ্লব করতে চাই না তবে আমি মনে করি এটি 320x480 এবং 800x480 ফোনের প্রস্থে বোধহয় আমি সম্ভবত সাইডবারটি সরিয়ে ফেলব বা কমপক্ষে ডানদিকে নিয়ে যাব।
ড্রেক

আমি যা দেখেছি তার থেকে আমি 100% সম্মত। খুব অল্প ব্যতিক্রম ব্যতীত, "মোবাইল থিম" - খুব কমপক্ষে, "মোবাইল থিম" প্লাগইনগুলি - স্তন্যপান করে এবং মোবাইলে মূল সাইটটি নেভিগেট করার চেয়ে ব্যবহার করা আরও শক্ত। যদিও আপনি যদি নিজের সাইটের মোবাইল সংস্করণ চেষ্টা করে দেখতে এবং তৈরি করার জন্য যথেষ্ট যত্নবান হন তবে এটিকে কেবল স্টাইলশিটের টুইটের বদলে সম্পূর্ণ পুনরায় নকশা হিসাবে ভাবেন।
গোল্ডেন অ্যাপলস

3

সরল: ব্যবহার wp_is_mobile()পরীক্ষা - এটি আরম্ভ হবে trueজন্য সব মোবাইল ডিভাইস (স্মার্ট ফোন, ট্যাবলেট, ইত্যাদি)।

হালনাগাদ

দয়া করে এটি করবেন না । এটি নির্ভরযোগ্য কাজ করে না।


2

আপনি যদি এটি কাস্টমাইজ করতে চান, ওয়ার্ডপ্রেসে সংহত করতে সহজ হন তবে এটি একটি দুর্দান্ত স্ক্রিপ্ট। http://detectmobilebrowsers.mobi/

একটি বিষয় লক্ষণীয় হ'ল বেশিরভাগ আইফোন, অ্যান্ড্রয়েড, বা দেশীয় ব্রাউজার সমর্থন সহ মোবাইল ফোন ব্যবহারকারীরা স্বয়ংক্রিয়ভাবে পুনঃনির্দেশিত হতে চান না!

এটি খারাপ অভ্যাস, একটি মোবাইল সংস্করণে একটি লিঙ্কের মাধ্যমে তাদের একটি বিকল্প দিন এবং মোবাইল সংস্করণে তাদের মূল সাইটে ফিরে আসার বিকল্প দিন।

আমি পুনরাবৃত্তি করছি আপনার মোবাইলের জন্য খুব নির্দিষ্ট কিছু তৈরি না করা বা আপনার কোনও নেটিভ ব্রাউজার সমর্থন (অসম্ভাব্য) না থাকলে পুরানো ফোনগুলি থেকে ট্র্যাফিক না থাকলে আপনার ব্যবহারকারীদের স্বয়ংক্রিয়ভাবে পুনরায় নির্দেশনা দেবেন না।

  • আপনার সার্ভার লগগুলির মাধ্যমে এটি কতটা গুরুত্বপূর্ণ তা জানানোর একটি সহজ উপায় যোগ করতে চেয়েছিল।

উভয় সংস্করণে স্যুইচ বিকল্প প্রস্তাব ভাল পর্যবেক্ষণ। কখনও কখনও আপনি একটি নন-মোবাইল ব্রাউজারে থাকেন তবে ধীর সংযোগে (সেলুলার মডেম, খারাপ ওয়াইফাই, ডায়ালআপ, ...) এর মাধ্যমে থাকেন এবং একটি মোবাইল-অনুকূলিত সংস্করণ পছন্দ করেন কারণ এটি (সাধারণভাবে) আরও ছোট।
জান ফ্যাব্রি

2

আমি একটি বিকল্প পদ্ধতির যোগ করব।

হতে পারে আপনি হস্তশিল্প এবং খুব নির্দিষ্ট প্রয়োজন অনুসারে সমস্ত স্টাইল এবং আচরণ ফিনিটুন করতে চান।

আমার সম্প্রতি ছিল: আইই 9 একটি জিনিস, যদি আইফোন দ্বিতীয়, আইপ্যাড যদি তৃতীয় এবং অন্য ... এবং দুর্দান্ত ফলাফল সহ ক্রিস শুল্ডের ব্রাউজার.এফপি ক্লাস ব্যবহার করে ।

আমি যে ফাংশনটি এসেছি এবং ব্যবহারের উদাহরণগুলি:

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";
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.