وب دیزاین

سازگاری با مرورگرها در طراحی سایت

—

توسط

مریم میرزایی
در
1 Star2 Stars3 Stars4 Stars5 Stars 14 امتیاز

Loading…

مشکلات برنامه‌نویس‌های تحت وب با مرورگر اینترنت اکسپلورر های قدیمی

اینترنت اکسپلورر بدون شک یکی از پرکاربرترین نرم‌افزارها و مرورگرها برای مشاهده صفحات وب می‌باشد. مشکل اساسی که مخصوصاً در کشور ما وجود دارد این است که هنوز هم اکثر کاربران نسخه‌های اینترنت اکسپلورر8 یا قبل از نسخه  8 استفاده می‌کنند و این به  بزرگ‌ترین کابوس طراحان وب در استفاده از HTML5و   css  تبدیل‌شده است.

حال می‌خواهیم برای رفع و فرار از این مشکلات در مرورگرهای که HTML5 پشتیبانی نمی‌کند ترفندهای برای نمایش عناصر استفاده کنیم:

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

  •  زمانی که کاربر با نسخه‌های اینترنت اکسپلورر قبل از نسخه  9 وارد سایت می‌شوند،بلافاصله از آن‌ها بخواهد که مرورگر خود را ارتقا یا تغییر دهند و اجازه ندیم کاربر وارد سایت شود(که کار مناسبی نیست.)بعد از تگ <body> می‌نویسم:
<script>
var isMSIE = /*@cc_on!@*/0;
if (isMSIE) {
alert('لطفاً مرورگر خود را تعویض نمایید !');
location.rel="nofollow" href="";
}
</script>

اینم جی کوئری با امکان کنترل نسخه مرورگر:

if($.browser.msie && $.browser.version <= 9)
{
alert('شما از یک مروگر قدیمی استفاده می کنید،لطفاً مروگر خود را برزو نمایید');

تکنیک دوم، کد نویسی، کدنویسی و کدنویسی!

  •  این روش هک css برای حل مشکل استفاده می‌شود. استفاده از دستور شرطی جاوا اسکریپتی که در تگ<head></head> استفاده می‌شود:
<!--[if lt IE 9]>
   <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
   <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
   <![endif]-->

که در اینجا اگر نسخه‌های اینترنت اکسپلورر قبل از نسخه  9 باشد باعث می‌شود که به سایت و فایل جاوا اسکریپتی و به یک تگ <script> متصل می‌شود و مرورگر را مجبور به تغییر رفتار در برابر کدها نوشته‌شده را می‌دهد. تا از مشکلات صفحه کد شده کمتر شود.

در مرورگر های غیر IE چطور؟

  • یکی از راه‌حل‌های که بسیار وقت‌گیر هست و احتیاج به نوشتن کدهای زیادی دارد تا بتوانیم به آن نتیجه دلخواه برسیم.باید دقیق و باحوصله کد نویسی کنیم.و از پیشوندهای مرورگرهای مختلف استفاده کنیم:
-moz-border-radius: 2em;
-ms-border-radius: 2em;
-o-border-radius: 2em;
-webkit-border-radius: 2em;
border-radius: 2em;

 ارزیابی عملکرد نسخه موبایل سایت ( واکنش گرا / ریسپانسیو) در مرورگرهای IE

طراحی قالب وب سایت سازگار با موبایل کار ساده ای نیست و نیاز به تجربه فراوانی دارد. ،با این حال به وسیله و کمک bootstrap بسیاری از این مشکلات حل شده ،اما در موبایل همچنان با مشکلات مرورگر ها برخورد میکنیم.برای اینکه کد های که برای سایت نوشتیم به طور صحیح در مرورگر های موبایل به درستی اجرا شود باید از کد های زیر در تگ <head></head> و قبل از تگ بستن هد باید  بنویسیم:

<meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->

 

دیدگاه‌ها

یک پاسخ به “سازگاری با مرورگرها در طراحی سایت”

  1. اطلاعاتی درباره Front End – وب دیزاین

    […] (IE)، اپرا (Opera) و… . برای اطلاعات بیشتر لطفاً به مقاله سازگاری با مرورگرها در طراحی سایت رجوع […]

دیدگاهتان را بنویسید

ارسال تیکت
ارسال