التحكم في عرض و إرتفاع الشاشة
التحكم في حجم الشاشة بواسطة screen.width و screen.height حيث يقوم العنصر screen width بجلب عرض الشاشة أما العنصر screen.height فيجلب لنا إرتفاع الشاشة. و يمكنك إنشاء مواقع متجاوبة أو تنفيذ الأوامر حسب شاشات الهواتف او شاشات الكمبيوتر المختلفة.
أمر عرض الشاشة screen.width في جافاسكربت
إذا قمنا بعرض بيانات العنصر screen.width على جهازنا, سوف نكتب الكود بالشكل.
alert(screen.width);
قمنا بكتابة أمر عرض البيانات alert و أعطيناه أن يطبع لنا العرض لشاشة جهازنا عبر screen.width و عندما نقوم بتشغيل هذا الكود في المتصفح سوف نحصل على النتيجة 1366 أي هذا عرض الشاشة لجهازي الحالي.
أمر إرتفاع الشاشة screen.height في جافاسكربت
إذا قمنا بعرض بيانات العنصر screen.height على جهازنا, سوف نكتب الكود بالشكل.
alert(screen.height);
قمنا بكتابة أمر طباعة البيانات عبر alert و أعطيناه أن يطبع لنا إرتفاع شاشة جهازنا عبر screen.height. و عندما نقوم بتشغيل هذا الكود في المتصفح سوف نحصل على النتيجة 590 بكسل أي هذا إرتفاع الشاشة لجهازي الحالي. تذكر جيداً أنه عند إستخدام هذين الأمرين سوف يعطينا قيمة نوع البيانات من نوع أرقام و ليس من النوع النصي و للتأكد من هذا سنستخدم هذا الأمر.
alert(screen.height - 150);
كتبنا في الأمر إطرح لنا 150 بكسل من عرض الشاشة و طرحه لنا, و بالفعل بقي 440 بكسل, هذا يدل بأن نوع البيانات هو أرقام و ليس نصي. و نستعرض النتيجه في المتصفح و نرى إن كان هذا صحيحاً أم لا, سوف يعطينا النتيجة 440. لنأخذ مثال فعلي لكي نفهم الأمر أكثر و كيف نقوم بإستخدام هذه الأمور, اولاً إذا كنت تستخدم متصفح google chroom إتبع الخطوات الآتية الموضحه في الصور. نقوم بالضغط على الزر الأيمن من الماوس في الصفحة و إختيار Inspect.
ثم بعد ذلك نقوم بإختيار الخيار المتضح بالصورة Elements و ثم الضغط على إشارة الشاشة بجانبه.
ثم نتوجه إلى المكان الذي ترونه أمامكم و إختيار حجم الشاشة التي تريدونها, فأنا إخترت Galaxy S5 .
مثلما نرى أنه إخترنا Galaxy S5 الإرتفاع يكون 640 بكسل و العرض 360 بكسل. مثلاً نريد تنفيذ الأوامر فقط على الإجهزة التي تكون 640*360, للقيام بذلك نقوم بكتابة جملة شرطية كالتالي.
alert(screen.wedth);
if (screen.width == 360 && screen.height == 640){
document.body.style .background = "red";
}
وضعنا alert لأجل ظهور ديالوك منبثق يعطينا عرض الشاشة. ثم وضعنا جملة شرطية تقول إذا كان العرض 360 بكسل و الإرتفاع 640 بكسل نفذ لي أمر تغيير خلفية الشاشة إلى اللون الأحمر, و إذا تحقق الشرط ستتغير الخلفية فوراً للون الأحمر. ستكون النتيجة
بهذه الطريقة يمكن تحديد الأحجام التي نريدها, و إذا غيرنا نوع الجهاز فلن يتم تنفيذ الأوامر ابداً لأن المحدد هو 640*360 بكسل. إذا نريد تنفيذ الأوامر على جميع الأجهزة التي تمتلك عرض أقل من 640 بكسل.
alert(screen.height);
if (screen.width < 640){
document.body.style .background = "red";
}
شرح هذا كما في السابق لكن قلنا له يحب أن يتنفذ الأوامر على جميع الأحجام التي تكون اقل من 640 بكسل.