اعرض موقعك حسب حجم شاشة الزائر

  يجب علي الموقع ان يحترم زواره و ان يقدم لهم الخدمة الافضل , و من هذه ان تعرض موقعك بالشكل الذي يناسب الزائر , لذا من المهم ان تعرض موقعك حسب اعدادات شاشاته و عرضها او ما يسمي الزيلويشن الابعاد ..

سوف تحكم بطريقة العرض عن طريق ملف css , يتغير باستخدام الجي كويري ..

بداية ً كيف يمكن لنا معرفة عرض الشاشة , لامر سهل لنظر ..

function checkWindowSize() {

if ( $(window).width() > 1800 ) {
$('body').addClass('large');
}
else {
$('body').removeClass('large');
}

}

بنظر الي النص البرمجي في الاعلي نستطيع تحديد عرض الشاشة بـ

 $(window).width();

لذا نحن قمنا بفحص اذا كان عرض الشاشة اكبر من 1800 سوف نضيف استايل الي البدي ,غير ذلك نقوم بحذف الاستايل

و هذا ملف ال CSS

#container {
width: 800px;
height: 1000px;
background: #e3e3e3;
margin: auto;
}

/* Change container size for larger windows. */
.large #container {
width: 1000px;
}

#nav {

width: 100%;
height: 100px;
border-bottom: 1px solid white;
background: #999999;

}

.large #nav {
float: left;
width: 200px;
border-bottom: none;
border-right: 1px solid white;
height: 1000px;
}