۸ تکنیک برای شناسایی موبایل و صفحه نمایش رتینا

۸ تکنیک برای شناسایی موبایل و صفحه نمایش رتینا
امروزه استفاده از Deviceهای مختلف بین کاربران رواج پیدا کرده است، کاربر وب سایت شما ممکن است با گوشی هوشمند خود، تبلت، کنسول‌های بازی و یا هر دستگاه دیگری غیر از کامپیوتر به سایت شما مراجعه کند، اگر شما بخواهید در همه دستگاه‌ها یک ساختار را نمایش دهید مسلما کاربر اذیت خواهد شد و محبوبیت خود را از دست خواهید داد.
دارالترجمه رسمی
دارالترجمه رسمی پارسیس شامل خدمات ترجمه رسمی و تخصصی در بیش از 60 زبان زنده دنیا
جای بروشور دیواری
خرید جای بروشور دیواری و رومیزی
افزونه های سئو وردپرس
بهترین افزونه های سئو وردپرس به صورت کاملا فارسی
تعمیر لوازم خانگی
تعمیر جاروبرقی، مایکروفر، بخارشوی، ظرفشویی، لباسشویی، سولاردام، کولرگازی
خودتان را اینجا معرفی کنید
حالا اگر شما بخواهید محتوای مخصوص موبایل به کاربر خود نمایش دهید باید بفهمید کدام کاربر با موبایل وارد سایت شما که محتوا بر اساس آن بهینه سازی شود.
در این مقاله ۸ تکنیک برای شناسایی کاربرانی که با موبایل از سایت شما بازدید می‌کنند آموزش داده می شود.

تکنیک اول : استفاده از User Agent در PHP
ما می‌توانیم توسط User Agent در PHP نوع مرورگر کاربر را پیدا کنیم، سپس با لیستی از انواع مختلف گوشی که مد نظر داریم بر اساس آن محتوای مختلفی را نمایش دهیم، آنرا بررسی می‌کنیم.
کد PHP زیر ساختار کامل ساده و مشخصی دارد، در ابتدا ما لیست گوشی‌های مورد نظر خود را درون یک آرایه ذخیره می‌کنیم، سپس برای اینکه  بتوانیم نوع گوشی مورد نظر خود را در User Agent جستجو کنیم از preg_match() استفاده می‌کنیم و سپس در صورتی که کاربر توسط موبایل به سایت ما مراجعه کرده باشد به صفحه دیگری هدایت خواهد شد.
<?php
    //Here is the known mobile user agents list
    $mobiles = array("iPhone","iPod");
    foreach( $mobiles as $mobile ) {
        if( preg_match( "#".$mobile."#i", $_SERVER['HTTP_USER_AGENT'] ) ) {
            //Ok, this is a mobile browser, let's redirect it!
            header('Location:http://mobile.mysite.com/'); 
            exit();
        }
    }
?>
ممکن است بخواهید به کاربر خود این امکان را بدهید که بتواند سایت عادی را مشاهده کند (مثلا با قرار دادن یک کلید در سایت با عنوان نمایش سایت عادی)، برای این کار کافیست که یک پارامتر بصورت Query String به برنامه خود پاس دهید (مثلا yoursite.com/?nomobile=1) که بتوان بر اساس آن فهمید آیا کاربر تمایل دارد سایت عادی را ببیند یا سایتی که برای موبایل بهینه شده است. ما برای اینکه در سایر صفحات سایت خود نیز بتوانیم از این موضوع مطلع شوید یک cookie ایجاد می‌کنیم.
 
<?php
    //let's check if we have a get or post or cookie set to nomobile
    if ( isset( $_REQUEST['nomobile'] ) && true == $_REQUEST['nomobile'] ) {
        //now we check if we have set the cookie, so we don't need the "get" in the URL all the time
        if ( ! isset($_COOKIE['nomobile']) ) {
            setcookie("nomobile", 1, (time()+60*60*24*30) );
        }
    } else {
        //nevermind, let's check if current browser is a mobile
        //Here is the known mobile user agents list
        $mobiles = array("iPhone","iPod");
        foreach( $mobiles as $mobile ) {
            if( preg_match( "#".$mobile."#i", $_SERVER['HTTP_USER_AGENT'] ) ) {
                //Ok, this is a mobile browser, let's redirect it!
                header('Location:http://mobile.mysite.com/'); 
                exit();
            }
        }
    }
?>

تکنیک دوم : استفاده از JavaScript 
شناسایی دستگاه کاربر با جاوااسکریپت هم امکان پذیر است. البته اگر بخواهیم روش قبل را با جاوااسکریپت انجام دهیم (منظور انتقال کاربر به صفحه بهینه شده برای موبایل است) خیلی منطقی به نظر نمی‌رسد، چون تمامی محتوای صفحه برای کاربر بارگزاری خواهد شد و سپس برنامه اجرا می‌شود که ممکن است در این حالت کاربر تجربه خوبی بدست نیاورد. اما شاید بتوان از این تکنیک برای نمایش یک پیغام یا اجرا شدن یک برنامه جاوااسکریپت هم استفاده کرد. در مثال زیر همان روش بالا با جاوااسکریپت شبیه سازی شده است.
<script type="text/javascript">
    var mobiles = array["iPhone", "iPod"];//mobile devices
    var i;
    for(i=0;i< mobiles.lenght;i++){
        //testing if the RE matches the mobile agents
        var er = new RegExp(mobiles,"i");
        if( er.test( navigation.userAgent ) ) {
            window.location = "http://mobile.mysite.com/" ;
        }
    }
</script>

تکنیک سوم: استفاده از کد وردپرس (Wordpress)
وردپرس بصورت پیش فرض کدهایی برای شناسایی مرورگر کاربر دارد و می‌تواند تشخیص دهد که آیا کاربر با iPhone به سایت شما مراجعه کرده است یا خیر. (همچنین یک سری مرورگرهای دیگر)
در زیر یک نمونه از این کد را مشاهده می‌کنید:
<?php
    function load_my_styles() {
        global $is_iphone; //loading global var here
        if( $is_iphone ) {
            wp_enqueue_style( 'iphone-style', get_stylesheet_directory_uri() . '/ iphone-style.css');
        } else {
            wp_enqueue_style('normal-style', get_stylesheet_directory_uri() . '/ style.css');
        }
    }
    add_action( "wp_enqueue_scripts", "load_my_styles" );
?>

تکنیک چهارم: استفاده از Pluginهای وردپرس
همانطوری که شعار اپل اینست که ”برای هر چیزی یک برنامه ای وجود دارد“ شعار وردپرس هم اینست که ”برای هر کاری پلاگین وجود دارد“ و همین موضوع خیلی به مدیران سایت‌هایی که از وردپرس استفاده می‌کنند کمک می‌کند، چون آنها می‌توانند بدون کدنویسی، تغییرات زیادی در سایت خود بدهند.
برای کاری که ما می‌خواهیم انجام دهیم پلاگین‌های مختلفی وجود دارد که بعضی از آنها نیاز به کمی کدنویسی دارند. در اینجا چند پلاگین معرفی می‌کنم که می‌توانید با مراجعه به سایت‌های خودشان اطلاعات بیشتری کسب و دانلود کنید.

تکنیک پنجم: کد HTML برای صفحه نمایش‌های Retina
برای اولین بار در سال ۲۰۱۰ با واژه جدیدی به نام Retina Display یا همان صفحه نمایش رتینا آشنا شدیم که در نوع خود بسیار هم عالی بود. اما این واژه و تکنولوژی یک هشدار برای طراحان بود، چون تغییرات زیادی را باید در طرح‌های خود اعمال می‌کردند، زیرا تصاویری که برای حالت عادی طراحی شده‌اند، در صفحات Retina به شکل تار (blurry) نمایش داده می‌شوند که همین مورد باعث کاهش زیبایی سایت می‌شود.
راه‌های مختلفی برای اینکه بتوانیم مرورگر کاربر را تشخیص دهیم وجود دارد که در تکنیک‌های قبلی به آن‌ها اشاره شد، اما حالا راه‌های آسان‌تری برای شناسایی صفحه‌نمایش‌‌‌های Retina وجود دارد.
شما می‌توانید یک فایل CSS مخصوص صفحه نمایش‌های Retina طراحی کنید و به مرورگر بفهمانید زمانی‌که کاربر با صفحه نمایش Retina مراجعه کرد آن فایل CSS را استفاده کند. برای اینکار از کد زیر استفاده کنید.
<link rel="stylesheet" type="text/css" src="assets/css/common_style.css" />
<link rel="stylesheet" type="text/css" src="assets/css/retina.css" media="only screen and (-webkit-min-device-pixel-ratio:2)" />
در این کد توسط media به مرورگر گفته‌اید زمانی که کاربر با تراکم پیکسل ۲ برابر صفحه را مشاهده می‌کند از فایل assets/css/retina.css استفاده کند.
اگر برای تصاویر داخل صفحه که با تگ <img> قرار داده‌اید هم می‌خواهید از این تکنیک استفاده کنید، به راحتی اینکار را با Retina.js انجام دهید.

تکنیک ششم: استفاده از Media Query
توسط مدیا کوئری‌ها می‌توانید استایل‌های مورد نظر خود را تحت شرایط خاص به selectorها اعمال کنید. برای اینکار ما می‌توانیم از چند فاکتور مختلف از جمله عرض مرورگر، عرض دستگاه و تراکم پیکسل استفاده کنیم.
در کد نمونه زیر حالات مختلف Media Query برای دستگاه‌های مختلف که از 320 and Up برداشته شده است را مشاهده می‌کنید.
/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
اگر می‌خواهید فقط بر اساس نوع صفحه نمایش، Media Query تعریف کنید (مثلا برای تغییر تصویر پس‌زمینه، لوگو، آیکون‌ها و ...) از این کد استفاده کنید:
@media only screen and (-webkit-min-device-pixel-ratio:2){
/* Styles */
}

تکنیک هفتم: Media Query از طریق JavaScript
در این روش که یک روش تقریبا مبهمی هم هست، از جاوااسکریپت برای شناسایی Media Query استفاده می‌کنیم و اگر به عنوان مثال مقدار true باشد کد جاوااسکریپتی که نوشته‌ایم اجرا می‌شود، که می‌تواند کارهای مختلفی از جمله تغییر class یا src تصویر و ... انجام دهد.
در کد زیر ابتدا نتیجه window.matchMedia در متغیری ذخیره می‌شود و سپس نتیجه آن را توسط شرط بررسی می‌کنیم. در صورتی که مقدار شرط ما true باشد می‌توانیم عملیات مختلفی را انجام دهیم.
<script type="text/javascript">
    //JS version for the retina query
    var modern_media_query = window.matchMedia( "screen and (-webkit-min-device-pixel-ratio:2)");

    if( modern_media_query.matches ){
        //DO ALL THE THINGS HERE
    }
</script>

تکنیک هشتم: استفاده از فایل .htaccess
در این کد که کاملا با تکنیک‌های قبلی متفاوت است، در خط نخست User Agent بررسی می‌شود و اگر بر اساس مقادیری که ما به آن داده‌ایم مقداری پیدا کند، آنرا ذخیره خواهد کرد.
خط دوم مسیر صفحه فعلی دریافت می‌شود و در خط سوم به آدرس موبایل که تعریف کرده‌ایم، هدایت می شود.
RewriteCond %{HTTP_USER_AGENT} “ipod|iphone|ipad|blackberry”[NC]
RewriteCond %{REQUEST_URI} ^/$
RewriteRule ^ http://m.yoursite.com%{REQUEST_URI} [R,L]


در این مقاله سعی شد تکنیک‌های شناسایی دستگاه و یا صفحه نمایش کاربر گفته شود، ممکن است برخی از این روش‌ها را قبلا کار کرده باشید و یا اینکه شما تکنیک دیگری بلد باشید. شما از کدوم تکنیک بیشتر استفاده می‌کنید؟ اگر تکنیکی بلد هستید که گفته نشد ممنون می‌شویم که از طریق بخش نظرات با ما هم به اشتراک بگذارید.

مجید علوی زاده فعالیت حرفه ای خود را از سال ۱۳۷۷ با طراحی گرافیک شروع کرد، طراحی وب را از سال ۱۳۸۰ و برنامه نویسی وب را از سال ۱۳۸۱ آغاز کرد و در همان سال وب سایت مجید آنلاین را تاسیس کرد. هم اکنون تخصص او طراحی و توسعه وب است.

نظرات و سوالات کاربران

ارسال پاسخ
شنبه ۲۶ اسفند ۱۳۹۶ ۱۰:۵۹
ممنون مطلب مفیدی در مورد بود.