بسیاری از وبسایتها ، رابط کاربری مجزایی را برای نمایش محتوای وب سایت خود روی گوشیهای موبایل و تبلت ها ارائه کرده اند. بطور مثال صفحه اول گوگل در نسخه موبایل بصورت زیر است:
سایتها از کجا میفهمد شما با چه مرورگری وارد سایتشان شده اید؟
هر مرورگری یه پارامتری داره بنام USER AGENT (بطور خلاصه UA) که مثل شناسنامه ی مرورگر است و اطلاعاتی از سیستم عامل ، نوع مرورگر ، موتور رندر مرورگر و نوع دستگاهی که این مرورگر روش نصب هست را ارائه میده. شما بعنوان برنامه نویس سایت می توانید هنگامی که کلاینت، صفحه ای را درخواست میکند ، همون اول کار با دستوراتی که در asp.net و php و بقیه زبانها وجود دارد، user agent کاربر را تشخیص دهید و بنا به نوع مرورگر کاربر، صفحات گوناگونی رو برایش response کنید.
چند نمونه user agent های مرورگرهای مختلف:
Firefox 10: Mozilla/5.0 (Windows NT 6.2; rv:10.0.1) Gecko/20100101 Firefox/10.0.1 Chrome 19: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/536.5 (KHTML, like Gecko) Chrome/19.0.1084.9 Safari/536.5 Opera 10: Opera/9.80 (Macintosh; Intel Mac OS X; U; en) Presto/2.2.15 Version/10.00 iPhone : Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_3_2 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8H7 Safari/6533.18.5 iPad : Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10 Android XOOM tablet : Mozilla/5.0 (Linux; U; Android 3.0; en-us; Xoom Build/HRI39) AppleWebKit/534.13 (KHTML, like Gecko) Version/4.0 Safari/534.13 Android Galaxy Tab : Mozilla/5.0 (Linux; U; Android 2.2; en-us; SCH-I800 Build/FROYO) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1 Symbian S60 3.0 Web browser : Mozilla/5.0 (Linux; U; Android 2.2; en-us; SCH-I800 Build/FROYO) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1 SonytEricsson k800i browser : SonyEricssonK800i/R1JG Browser/NetFront/3.3 Profile/MIDP-2.0 Configuration/CLDC-1.1
همانگونه که مشاهده میکنید user agent های هر دستگاه یا مرورگر با بقیه متمایز است. اما این رشته های UA یکسری لغات مشترک دارند. مثلا کلمه MIDP در رشته UA کلیه گوشیهایی که جاوا را پشتیبانی میکنند (مانند سونی اریکسون و سامسونگ های ارزان قیمت) وجود دارد. همچنین در UA گوشیهای اندرویدی کلمه mobile یا phone وجود دارد که البته لغت mobile در UA گوشیهای آیفون و آی پد نیز دیده میشود. پس شما کافیست هنگامی که یک request به سرور میرسد user agent او را بگیرید و برای نمایش نسخه موبایل، در رشته user agent دنبال یکی از این کلمات باشید.
تست نسخه موبایل سایتها روی مرورگر کروم:
اکثر موبایلها و تبلت هایی که شما باید براشون یک رابط کاربری طراحی کنید از سیستم عامل Android یا iOS بهره می برند. هر دوی این سیستم عامل ها مرورگر خود را بر اساس موتور رندر webkit طراحی کرده اند و موتور رندر مرورگر کروم نیز webkit است. پس قابلیت های مرورگر کروم دقیقا قابلیت های مرورگر اندروید و آیفون است و این مرورگرها صفحه ی شما را یه جور نمایش میدهند. اما مشکل اینجاست که وقتی شما با مرورگر کروم وارد صفحه سایتی مانند گوگل میشوید، گوگل از روی user agent مرورگر کروم شما ، تشخیص میدهد که شما از طریق سیستم عامل ویندوز در حال مشاهده سایت هستید و به همین دلیل نسخه موبایل را به شما نمایش نمی دهد. خب پس اگر شما بتوانید user agent مرورگر خود را عوض کنید، گوگل را هم گول میزنید و می توانید به او بگویید که مرورگرتان مثلا مرورگر سیستم عامل اندروید است.
چطور user agent مرورگر خود را عوض کنیم؟
حدود شش ماه پیش گوگل امکان تغییر user agent را به کروم اضافه کرد. هم اکنون با استفاده از افزونه ی User Agent Switcher می توانید بطور موقت USER AGENT مرورگر خود را عوض کنید و سری به سایتهای گوگل و یاهو و فیسبوک و غیره بزنید تا بجای نسخه اصلی ، نسخه موبایل آنها را روی مرورگر خود ببینید. فقط یک نکته: این افزونه در بخش user agent های پیشفرض اندرویدی که در لیستش داره، هنوز UA مخصوص گوشیهای اندروید را اضافه نکرده. بلکه فقط UA مخصوص تبلت Motorolla XOOM رو داره . پس اگر میخواهید نسخه موبایل صفحه گوگل را با اندروید ببینید، باید خودتان UA مخصوص آنرا اضافه کنید. مثلا می توانید UA مربوط به تبلت گالاکسی تب را اضافه کنید (این تبلت در UA خودش، کلمه mobile را دارد) . برای اضافه کردن UA ها به این افزونه رویش کلیک راست کنید و در بخش options می توانید UA های موردنیاز خود را اضافه کنید.