نمایش بهم ریخته سایت در مرورگهای قدیمی

[omidparkour 37]

سلام

نمیدونم چرا سایت توی مروگرهای قدیمی بد نشون داده میشه . مثلا سایدبار وسط میاد بعد محتوای اصلی میره زیر سایدبار

لطفا کمک کنید

www.toolweb.ir

ممنون

[حاج ایمان 486]

ببینید بزرگترین مشکل طراحان ایرانی و خارجی IE هستش ، چرا چون هم محبوبه هم ضعیف ، چند تا راه کار دارید ،

1. برید پلاگین مرورگر های فرسوده رو نصب کنید تا کاربر هدایت بشه به صفحه دانلود مرورگر مدرن
   
2. بهتره از فریمورک های جدید Bootstrap یا Foundation استفاده کنید برای طراجی قالب های
   
3. بیخیالش بشی چون اونقد باید باگ گیری کنی که ....
   

ویرایش شده شهریور 93 توسط Ediablo77

[omidparkour 37]

منظورم از مرورگر های قدیمی ورژن های قدیمی هست

بعدشم من نمیدونم که چرا باید از bootstrap استفاده کرد؟؟ اگه بخاطر رسپانسیو کردنش هست که bootstrap هم از طریق مدیا کوئری رسپانسیو میکنه پس اگر هم از bootstrap استفاده نشه و با مدیا کوئری ریسپانسیو بشه هیچ فرقی نداره

[حاج ایمان 486]

نه این فریمورک با Normalize.css کار میکنه که اگر سایتی روش سوار بشه مطمئنا هیچ ایرادی نخواهد داشت مگر اینکه درست استفاده نشه ، بعدم میتونی از Validator استفاده کنی اگر زبانت خوبه بهت کمک میکنه

مثلا من خودم با Bootstrap قالب سوار کردم چند تا ،

اونقد مستندات کاملی دارن که فقط کافیه وقت بزاری

Responsive کردن باگ گیری کردن نیست ، پس بهتره که قالب های معروف استفاده کنی تا مشکلی پیش نیاد یا خودت با فریمورک سوار کنی

[omidparkour 37]

من قالب وقتی html-css بود وقتی از validator w3shool استفاده کردم هیچ اروری نداشت

اما وقتی wp کردم چندتا ارور معمولی اومده اما رفع نکردم

اما تو مرورگر های ورژن قدیمی سایت بد نشون داده میشه

[Alireza Xn 1644]

فریم ورک ها مثل بوت استرپ میشه گفت یکی از قابلیت هاشون ریسپانسیو بودنه قابلیت های دیگشون اینکه سرعت طراحی قالب رو بالاتر میبرن و یه جورایی کدهاشون آمادست و وقت کمی از طراح میگیره که البته یکی از بزرگترین معایبش اینکه دست طراح رو باز نمیذاره و متکی به متغیر ها و دستورات خودش میکنه و طراح وب رو تنبل !!

شما میتونی توسط کتابخانه های مختلف استایل های متفاوتی برای مرورگر های قدیمی بنویسی که سایتتون در مرورگر های قدیمی استایل استاندارد و ساده ایی داشته باشه .

[mr.browser 24]

برادر من ول کن مرورگرهای قدیمی رو همینا ریشه کن کردن طراحان ما رو که از زمان قاجار تا الان با اینترنت ایکسپلورر فقط و فقط میشه وارد سایت های دانشگاهی شد!!

الان خود مایکروسافت هم قهمیده مرورگرش دیگه بدرد نمیخوره. داره IE رو حذف میکنه حتی اسمشم قراره عوض کنه و داره یه مرورگر جدید میسازه!!!

بجای اینکه وقت خودت رو صرف کد نویسی برای مرورگرهای قدیمی کنی، بهتره بروز باشی و کدهای سایتت تحت کدهای استاندارد html و css نوشته بشه!

بهترین پیشنهاد اینه که وفتی کاربری با مرورگر قدیمی به سایتت میاد بهش پیغام بده که جان عمت مرورگرتو آپدیت کن هم امنیت داری هم سرعت بیشتر و هم ما وب سایت داران نفس راحتی بکشیم و شب موقع خوابیدن به این فکر نکنیم که امروز چند نفر سایت رو کجو کوله دیدن!!!

اینم نمودار رشد مرورگرها از سال 2013 تا 2014 در ایران!

http://gs.statcounte...y-201307-201407

ویرایش شده شهریور 93 توسط mr.browser

[omidparkour 37]

خب چه کدی باید بنویسم که وقتی کاربر با مرورگر قدیمی اومد پیغام بده که برای مشاهده سایت مرورگر خود را به روز رسانی کنید؟؟؟

[Ghasem Paran 333]

خب چه کدی باید بنویسم که وقتی کاربر با مرورگر قدیمی اومد پیغام بده که برای مشاهده سایت مرورگر خود را به روز رسانی کنید؟؟؟

مطمءن نیستم درست کار کنه.(تست نشده)

$browsers = "mozilla msie gecko firefox ";
$browsers.= "konqueror safari netscape navigator ";
$browsers.= "opera mosaic lynx amaya omniweb maxthon theworld traveler chrome";
$browsers = explode(" ", $browsers);
$nua = strToLower( $_SERVER['HTTP_USER_AGENT']);
$l = strlen($nua);
for ($i=0; $i<count($browsers); $i++){
	 $browser = $browsers[$i];
	 $n = stristr($nua, $browser);
	 if(strlen($n)>0){
		 $GLOBALS["ver"] = "";
		 $GLOBALS["nav"] = $browser;
		 $j=strpos($nua, $GLOBALS["nav"])+$n+strlen($GLOBALS["nav"])+1;
		 for (; $j<=$l; $j++){
				 $s = substr ($nua, $j, 1);
				 if(is_numeric($GLOBALS["ver"].$s) )
					 $GLOBALS["ver"] .= $s;
				 else
					 break;
		 }
	 }
}
if( ($GLOBALS["nav"] == "firefox" && $GLOBALS["ver"] <= 15) || ( $GLOBALS["nav"] == "msie" && $GLOBALS["ver"] <= 8 ) ) {
// browser is older
}
else
{
// go to website
header("location: yourWebsiteFolder");
}

منبع :

http://stackoverflow.com/questions/16262406/redirect-old-browsers

+

https://wordpress.org/plugins/jt-old-browser-alert/
http://codecanyon.net/item/warning-old-browser-wordpress-plugin/3287536
https://wordpress.org/plugins/internet-explorer-alert/
https://wordpress.org/plugins/advanced-browser-check/

ویرایش شده شهریور 93 توسط Ghasem Paran

[omidparkour 37]

سلام

ممنون

توی این خط ورژن رو تعیین میکنیم؟

if( ($GLOBALS["nav"] == "firefox" && $GLOBALS["ver"] <= 15) || ( $GLOBALS["nav"] == "msie" && $GLOBALS["ver"] <= 8 ) ) {

[Ghasem Paran 333]

سلام

ممنون

توی این خط ورژن رو تعیین میکنیم؟

if( ($GLOBALS["nav"] == "firefox" && $GLOBALS["ver"] <= 15) || ( $GLOBALS["nav"] == "msie" && $GLOBALS["ver"] <= 8 ) ) {

فکر کنم

[omidparkour 37]

سلام

آقا فک کنم فهمیدم چرا بد نشون داده میشه

اگر آیتم های منو زیر هدر بیان پایین قالب بندی صفحه از بین میره یعنی سایدبار میاد وسط و محتوای اصلی میره زیرش و....

برای امتحان کردنش شما به #navbar li بیاید marign-top:20px بدید میبینید چی میشه ای

برای حل این مشکل چی کنم؟؟

[imanfakhar 26231]

سلام

ممنون

توی این خط ورژن رو تعیین میکنیم؟

if( ($GLOBALS["nav"] == "firefox" && $GLOBALS["ver"] <= 15) || ( $GLOBALS["nav"] == "msie" && $GLOBALS["ver"] <= 8 ) ) {

ورژن ها درست تعریف شدند

[imanfakhar 26231]

سلام

آقا فک کنم فهمیدم چرا بد نشون داده میشه

اگر آیتم های منو زیر هدر بیان پایین قالب بندی صفحه از بین میره یعنی سایدبار میاد وسط و محتوای اصلی میره زیرش و....

برای امتحان کردنش شما به #navbar li بیاید marign-top:20px بدید میبینید چی میشه ای

برای حل این مشکل چی کنم؟؟

بهش position: relative; بدید و marign:auto; و display:bock; احتمال داره توی ورژن 8 هم درست بشه ولی برای آی ای ورژن 7 باید table بسازید

[omidparkour 37]

سلام

اینجوری که آیکون کنارش از بین میره

[omidparkour 37]

من الان اومدم

بعد از </nav> تگ <div class="clear"></div> رو گذاشتم درست شد

اما آیتم ها منو اومدن پایین

چی کنم؟

[imanfakhar 26231]

آیکون کنارش را باید داخل دایو navbar بسازید و با float بکشیدش کنار

(شما برای آی ای محدودیتهایی را دارید که چاره ای توشون نیست تنها راه چاره اینه که استایل جدا براش بنویسید نه اینکه استایل فعلی سایت را براش تغییر بدید چون نتیجه وقتی در آی ای درست شد در اپرا و موزیلا به هم میریزه و وقتی تو اونها درست بشه در سافاری و کروم )

خواص clear

.clear {
display:block;
clear:both;
overflow:hidden;
font-size:1px;
line-height:1px;
height:1px;
white-space:nowrap;
}

وحتما به این شکل استفاده بشه

<div class="clear"> </div>

[omidparkour 37]

دقیقا متوجه نشدم

[imanfakhar 26231]

چی رو متوجه نشدید؟

[omidparkour 37]

اینکه چی کنم تا آیتم های منو سرجاشون قرار بگیرن و آیکونی که من دادم رو داشته باشن

[imanfakhar 26231]

مگه نگفتید با clear درست شد استایلی که دادم را به clear بدهید تا جای منو تغییر نکنه

[omidparkour 37]

سلام

با clear اون چیزی که قالب بندی صفحه از بین میرفتم درست شد

اما الان هنوز اینجوزیه

[imanfakhar 26231]

باید کد نویسیتون کلا بررسی بشه که من فرصتش رو ندارم بهترین راه حذف آیکون ها در ورژنهای پایین آی ایه

استایلی که برای این بخش دارید + خاصیت display:none برای آیکونها را در یک فایل با نام ie.css ذخیره کنید و این کد را بگذارید در header.php

<!--[if lt IE 8]>
<link href="<?php echo esc_url( get_template_directory_uri() . '/ie.css' ); ?>" rel="stylesheet" type="text/css">
<![endif]-->

[omidparkour 37]

الان توی همه مرورگر ها اینجوریه

[imanfakhar 26231]

الان توی همه مرورگر ها اینجوریه

ایندفعه دیگه من گیج شدم

ببینید بجای

<div class="clear"> </div>

می گذارید

<div class="ie-clear">  </div>

بعد در استایل اصلی سایت بهش خاصیت display:none می دید و در فایل مخصوص ie های قدیمی بهش display:block و در عوض آیکونها را display:none