5 1 1 1 1 1 1 1 1 1 1 رتبه 5.00 (3 رای)

آیکون مرورگرها!


یکی از مشکلاتی که بسیاری از وب سایت ها با آن مواجه هستند، عدم نمایش متناسب قالب وب‌سایت در مرورگرهای مختلف است. نکته مهم این است که وب‎سایت شما در ورژن های مختلف مرورگرهای متفاوت به درستی نمایش داده شود.

 

در مرحله اول می توانید با یک آنالیز ساده از سایتتان و با کمک سرویس هایی مانند گوگل آنالیز(Google Analytics) یا اسکریپت‎هایی مانند پیویک (piwik) آمار مرورگرهای استفاده شده توسط بازدیدکنندگان وبسایتتان را در بازه زمانی مشخص مشاهده کنید. حال می توانید تمرکز خود را بیشتر برای مرورگرهای مشخص شده بگذارید، مثلا در یک سایت اداری در ایران ممکن هست بین 2 تا 5 درصد کاربران هنوز از IE6 استفاده کنند و با وجود تمام محدودیت هایی که این که این مرورگر ایجاد می کند، طراح ممکن است مجبور به بهینه سازی اختصاصی برای قالب و یا حتی اختصاص دادن قالب جدا برای این ورژن شود.

 از آن جا که تمامی مرورگرها ممکن است برای شما در دسترس نباشد، برای سهولت کار می توانید از سایت browsershots استفاده کنید، توسط این سایت می توانید نمایش سایت خود را در ورژن‎های مختلف مرورگرهایی که می خواهید مشاهده کنید،

روش اول: استفاده از جی کوئری برای شناسایی مرورگر

مزایا: استفاده بسیار آسان

معایب: تنها قابل اعمال در جی کوئری 1.5.1 تا 1.8.3،  این دستور در جی کوئری 1.9 اجرا نمی شود.

 

ابتدا توسط این اسکریپت مرورگر و ورژن آن را شناسایی می کنیم:

var userAgent = navigator.userAgent.toLowerCase(),
    browser   = '',
    version   = 0;

$.browser.chrome = /chrome/.test(navigator.userAgent.toLowerCase());


// Is this a version of IE?
if ($.browser.msie) {
  userAgent = $.browser.version;
  userAgent = userAgent.substring(0,userAgent.indexOf('.'));	
  version = userAgent;
  browser = "IE";
}


// Is this a version of Chrome?
if ($.browser.chrome) {
  userAgent = userAgent.substring(userAgent.indexOf('chrome/') + 7);
  userAgent = userAgent.substring(0,userAgent.indexOf('.'));	
  version = userAgent;
  // If it is chrome then jQuery thinks it's safari so we have to tell it it isn't
  $.browser.safari = false;
  browser = "Chrome";
}

// Is this a version of Safari?
if ($.browser.safari) {
  userAgent = userAgent.substring(userAgent.indexOf('safari/') + 7);	
  userAgent = userAgent.substring(0,userAgent.indexOf('.'));
  version = userAgent;	
  browser = "Safari";
}

// Is this a version of Mozilla?
if ($.browser.mozilla) {
	//Is it Firefox?
	if (navigator.userAgent.toLowerCase().indexOf('firefox') != -1) {
		userAgent = userAgent.substring(userAgent.indexOf('firefox/') + 8);
		userAgent = userAgent.substring(0,userAgent.indexOf('.'));
		version = userAgent;
		browser = "Firefox"
	}
	// If not then it must be another Mozilla
	else {
	  browser = "Mozilla (not Firefox)"
	}
}

// Is this a version of Opera?
if ($.browser.opera) {
	userAgent = userAgent.substring(userAgent.indexOf('version/') + 8);
	userAgent = userAgent.substring(0,userAgent.indexOf('.'));
	version = userAgent;
	browser = "Opera";
}

حال می توانیم با کمک این اسکریپت برای هر مرورگر ویژگی های منحصر به فرد تعریف کنیم، در این مثال فایل های css اختصاصی برای هر مرورگر تعریف شده است، البته با توجه به اطلاعاتی که از اسکریپت بالا به دست می آوریم می توانیم برای هر ورژن مجزای مرورگرها تغییرات مورد نظر خود را اعمال کنیم.

if (browser.indexOf("Chrome")>-1) {
document.write('<'+'link rel="stylesheet" href="/style/style-chrome.css" />');
} else if (browser.indexOf("Firefox")>-1) {
    document.write('<'+'link rel="stylesheet" href="/style/style-mozila.css" />');
} else if (browser.indexOf("Opera")>-1) {
    document.write('<'+'link rel="stylesheet" href="/style/style-opera.css" />');
} else if (browser.indexOf("Safari")>-1) {
    document.write('<'+'link rel="stylesheet" href="/style/style-safari.css" />');
} else if (browser.indexOf("IE")>-1) {
    document.write('<'+'link rel="stylesheet" href="/style/style-ie.css" />');
}

 در کد بالا برای هر مرورگر فایل css مورد نظر که در فولدر style در کنار فابل مادر وحود دارد خوانده می شود. در این جا می توانید دموی کد استفاده شده را مشاهده کنید:

فایــرفاکس: نارنجــی
گوگل کــروم: سبــز
اپــرا: فرمــز
اینترنت اکسپلورر: آبـــی
سافــاری: سیــاه

 دانلود پکیج نمونه

این مقاله به تدریح تکمیل می شود و روش استفاده از modernizr، whichbrowser و ... اضافه خواهد شد.

نظر خود را اضافه کنید.

ارسال نظر به عنوان مهمان

0
http://amaspad.com/index.php?option=com_komento&controller=captcha&captcha-id=67647&tmpl=component
نظر شما به دست مدیر خواهد رسید
  • هیچ نظری یافت نشد