التحكم في قياس عرض و إرتفاع الشاشة في جافاسكربت - ProgrammerTech
Language:

Search

التحكم في قياس عرض و إرتفاع الشاشة في جافاسكربت

  • Share this:
التحكم في قياس عرض و إرتفاع الشاشة في جافاسكربت

التحكم في عرض و إرتفاع الشاشة

التحكم في حجم الشاشة بواسطة 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.

1-51.webp

 

ثم بعد ذلك نقوم بإختيار الخيار المتضح بالصورة Elements و ثم الضغط على إشارة الشاشة بجانبه.

2-45.webp

 

ثم نتوجه إلى المكان الذي ترونه أمامكم و إختيار حجم الشاشة التي تريدونها, فأنا إخترت Galaxy S5 .

3-41.webp

 

مثلما نرى أنه إخترنا Galaxy S5 الإرتفاع يكون 640 بكسل و العرض 360 بكسل. مثلاً نريد تنفيذ الأوامر فقط على الإجهزة التي تكون 640*360, للقيام بذلك نقوم بكتابة جملة شرطية كالتالي.

alert(screen.wedth);
if (screen.width == 360 && screen.height == 640){
	document.body.style .background = "red";
}

وضعنا alert لأجل ظهور ديالوك منبثق يعطينا عرض الشاشة. ثم وضعنا جملة شرطية تقول إذا كان العرض 360 بكسل و الإرتفاع 640 بكسل نفذ لي أمر تغيير خلفية الشاشة إلى اللون الأحمر, و إذا تحقق الشرط ستتغير الخلفية فوراً للون الأحمر. ستكون النتيجة

4-37.webp

 

بهذه الطريقة يمكن تحديد الأحجام التي نريدها, و إذا غيرنا نوع الجهاز فلن يتم تنفيذ الأوامر ابداً لأن المحدد هو 640*360 بكسل. إذا نريد تنفيذ الأوامر على جميع الأجهزة التي تمتلك عرض أقل من 640 بكسل.

alert(screen.height);
if (screen.width < 640){
	document.body.style .background = "red";
}

شرح هذا كما في السابق لكن قلنا له يحب أن يتنفذ الأوامر على جميع الأحجام التي تكون اقل من 640 بكسل.


Muhammad Alush

Muhammad Alush

إسمي محمد تركي العلوش من سورية من ريف حلب الشرقي 1994, محب للتقنية و التعلم الذاتي, و جميع خبراتي تعلمتها ذاتياً, و اللغات البرمجية التي أتقنها هي html, css, javascript, php, c, python بالإضافة إلى حبي الكبير لمجال الشبكات.

موقعي programmer-tech.com