الطريقة الصحيحة للتعامل مع Media Queries من داخل الجافاسكربت

raheel · 01-04-2019, 07:06 PM

لا يخفى على أي مطور ويب الدور الكبير الذي تلعبه Media Queries في CSS3 للحصول على تطبيقات ويب متجاوبة Responsive مع جميع أنواع الأجهزة (موبايل، كومبيوتر، حواسب لوحية …إلخ). فمن خلالها نستطيع تحديد وتخصيص شكل التطبيق حسب عدد من المتغيرات مثل عرض الشاشة وطولها، اتجاه الجهاز Orientation، دقة الشاشة Resolution وغيرها من المعايير والمتغيرات المختلفة.
في المثال التالي يظهر لنا أن ملف main.css موجه لجميع الأجهزة، بينما يختص ملف mobile.css بالأجهزة التي يقل عرضها عن 768 بيكسيل، وهي في الغالب تكون هواتف محمولة.
<link rel="stylesheet" media="all" href="main.css" /> <link rel="stylesheet" media="(max-width: 768px)" href="mobile.css" />
1
2

<link rel="stylesheet" media="all" href="main.css" />
<link rel="stylesheet" media="(max-width: 768px)" href="mobile.css" />

الإمكانيات التي تتيحها Media Queries كبيرة ويتم استغلالها على أفضل نحو من طرف عدد من إطارات العمل مثل Bootstrap و Zurb Foundation. ولكن ماذا لو أردنا الوصول لهذه الإمكانات من خلال الجافاسكريبت، ماذا لو أردنا مثلا إضافة محتوى أو كود جافاسكربت خاص بنوع معين من الأجهزة، هواتف ذكية على سبيل المثال ؟ طبعا هذا غير ممكن بواسطة CSS وحدها!
قد يقول أحدهم أنني أستطيع حساب عرض الشاشة باستخدام دالة document.documentElement.clientWidth، هذا صحيح يمكنك فعل ذلك ولكن كما ذكرنا في المقدمة حساب العرض والطول ليس كل شيء، فماذا لو أردت استهداف أجهزة بدقة شاشة معينة أو حسب اتزانية الأبعاد Aspect Ratio ؟ المهمة حينها ستزداد صعوبة بالتأكيد خاصة إذا عرفنا أن أي حل ترقيعي تتوصل إليه ليس مضمونا بأنه سيعمل على كافة الأجهزة والمتصفحات وبالتالي ستجد نفسك أمام تحد جديد هو مشكل التوافقية Compatibility.
التعامل مع Media Queries من داخل جافاسكربت

لحسن الحظ أصبحنا الآن نستطيع التعامل مع Media Queries من داخل كود الجافاسكريبت، كلمة السر في دالة جديدة داخل الكائن window واسمها matchMedia بحيث نمرر لها الميديا كويري على شكل بارامتر كما في المثال التالي :
const mqMobile = window.matchMedia( "(max-width: 768px)" );
1

const mqMobile = window.matchMedia( "(max-width: 768px)" );

بعد ذلك يمكننا استخدام الخاصية matches للتحقق من نتيجة الميديا كويري:
if (mqMobile.matches) { // عرض الشاشة أقل من 768 بيكسيل } else { // عرض الشاشة أكثر من 768 بيكسيل }
1
2
3
4
5

if (mqMobile.matches) {
// عرض الشاشة أقل من 768 بيكسيل
} else {
// عرض الشاشة أكثر من 768 بيكسيل
}

الجميل كذلك أننا نستطيع إضافة حدث Event Listener للكائن mqMobile وانتظار أي تغيير قد يطرأ على عرض الشاشة كما في مثالنا :
if (matchMedia) { const mqMobile = window.matchMedia("(max-width: 768px)"); mq.addListener(widthChange); widthChange(mq); } function widthChange(mqMobile) { if (mqMobile.matches) { // عرض الشاشة أقل من 768 بيكسيل } else { // عرض الشاشة أكثر من 768 بيكسيل } }
1
2
3
4
5
6
7
8
9
10
11
12
13

if (matchMedia) {
const mqMobile = window.matchMedia("(max-width: 768px)");
mq.addListener(widthChange);
widthChange(mq);
}

function widthChange(mqMobile) {
if (mqMobile.matches) {
// عرض الشاشة أقل من 768 بيكسيل
} else {
// عرض الشاشة أكثر من 768 بيكسيل
}
}

نهاية الدرس

يحظى الكائن matchMedia بدعم واسع من قبل معظم المتصفحات المعروفة، وبالتالي فليس هناك أي مانع من البدء في استخدامه في مشاريعك القادمة، فهو كما رأينا يسهل التعامل معه وبسطر واحد أو سطرين يمكننا إنجاز مهام قدد تتطلب منا عشرات الأسطر بدونه.

المصدر: منتديات رحيل لكل العرب - من قسم: قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress

01-04-2019, 07:06 PM	#1
raheel تاريخ التسجيل: Feb 2019 العمر: 38 المشاركات: 1,149 التقييم: 10	raheel تاريخ التسجيل: Feb 2019 العمر: 38 المشاركات: 1,149 التقييم: 10 الطريقة الصحيحة للتعامل مع Media Queries من داخل الجافاسكربت الطريقة الصحيحة للتعامل مع Media Queries من داخل الجافاسكربت لا يخفى على أي مطور ويب الدور الكبير الذي تلعبه Media Queries في CSS3 للحصول على تطبيقات ويب متجاوبة Responsive مع جميع أنواع الأجهزة (موبايل، كومبيوتر، حواسب لوحية …إلخ). فمن خلالها نستطيع تحديد وتخصيص شكل التطبيق حسب عدد من المتغيرات مثل عرض الشاشة وطولها، اتجاه الجهاز Orientation، دقة الشاشة Resolution وغيرها من المعايير والمتغيرات المختلفة. في المثال التالي يظهر لنا أن ملف main.css موجه لجميع الأجهزة، بينما يختص ملف mobile.css بالأجهزة التي يقل عرضها عن 768 بيكسيل، وهي في الغالب تكون هواتف محمولة. <link rel="stylesheet" media="all" href="main.css" /> <link rel="stylesheet" media="(max-width: 768px)" href="mobile.css" /> 1 2 <link rel="stylesheet" media="all" href="main.css" /> <link rel="stylesheet" media="(max-width: 768px)" href="mobile.css" /> الإمكانيات التي تتيحها Media Queries كبيرة ويتم استغلالها على أفضل نحو من طرف عدد من إطارات العمل مثل Bootstrap و Zurb Foundation. ولكن ماذا لو أردنا الوصول لهذه الإمكانات من خلال الجافاسكريبت، ماذا لو أردنا مثلا إضافة محتوى أو كود جافاسكربت خاص بنوع معين من الأجهزة، هواتف ذكية على سبيل المثال ؟ طبعا هذا غير ممكن بواسطة CSS وحدها! قد يقول أحدهم أنني أستطيع حساب عرض الشاشة باستخدام دالة document.documentElement.clientWidth، هذا صحيح يمكنك فعل ذلك ولكن كما ذكرنا في المقدمة حساب العرض والطول ليس كل شيء، فماذا لو أردت استهداف أجهزة بدقة شاشة معينة أو حسب اتزانية الأبعاد Aspect Ratio ؟ المهمة حينها ستزداد صعوبة بالتأكيد خاصة إذا عرفنا أن أي حل ترقيعي تتوصل إليه ليس مضمونا بأنه سيعمل على كافة الأجهزة والمتصفحات وبالتالي ستجد نفسك أمام تحد جديد هو مشكل التوافقية Compatibility. التعامل مع Media Queries من داخل جافاسكربت لحسن الحظ أصبحنا الآن نستطيع التعامل مع Media Queries من داخل كود الجافاسكريبت، كلمة السر في دالة جديدة داخل الكائن window واسمها matchMedia بحيث نمرر لها الميديا كويري على شكل بارامتر كما في المثال التالي : const mqMobile = window.matchMedia( "(max-width: 768px)" ); 1 const mqMobile = window.matchMedia( "(max-width: 768px)" ); بعد ذلك يمكننا استخدام الخاصية matches للتحقق من نتيجة الميديا كويري: if (mqMobile.matches) { // عرض الشاشة أقل من 768 بيكسيل } else { // عرض الشاشة أكثر من 768 بيكسيل } 1 2 3 4 5 if (mqMobile.matches) { // عرض الشاشة أقل من 768 بيكسيل } else { // عرض الشاشة أكثر من 768 بيكسيل } الجميل كذلك أننا نستطيع إضافة حدث Event Listener للكائن mqMobile وانتظار أي تغيير قد يطرأ على عرض الشاشة كما في مثالنا : if (matchMedia) { const mqMobile = window.matchMedia("(max-width: 768px)"); mq.addListener(widthChange); widthChange(mq); } function widthChange(mqMobile) { if (mqMobile.matches) { // عرض الشاشة أقل من 768 بيكسيل } else { // عرض الشاشة أكثر من 768 بيكسيل } } 1 2 3 4 5 6 7 8 9 10 11 12 13 if (matchMedia) { const mqMobile = window.matchMedia("(max-width: 768px)"); mq.addListener(widthChange); widthChange(mq); } function widthChange(mqMobile) { if (mqMobile.matches) { // عرض الشاشة أقل من 768 بيكسيل } else { // عرض الشاشة أكثر من 768 بيكسيل } } نهاية الدرس يحظى الكائن matchMedia بدعم واسع من قبل معظم المتصفحات المعروفة، وبالتالي فليس هناك أي مانع من البدء في استخدامه في مشاريعك القادمة، فهو كما رأينا يسهل التعامل معه وبسطر واحد أو سطرين يمكننا إنجاز مهام قدد تتطلب منا عشرات الأسطر بدونه. المصدر: منتديات رحيل لكل العرب - من قسم: قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress
	اقتباس

المواضيع المتشابهه
الموضوع	كاتب الموضوع	المنتدى	مشاركات	آخر مشاركة
الطريقة الصحيحة للتعامل مع أخطاء أطفالك	raheel	عالم حواء وتربية الأطفال	0	15-04-2019 04:43 PM
الطريقة الصحيحة للتعامل مع الطفل العنيد	raheel	عالم حواء وتربية الأطفال	0	15-04-2019 04:38 PM
نصائح ياهوو (Yahoo) التي تساعدك علي تسريع المواقع	raheel	قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress	0	07-04-2019 06:38 PM
الطريقة الصحيحة للتعامل عند اختراق موقعك	raheel	قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress	0	27-03-2019 07:01 PM
كتابة المقالات – تعرف على الطريقة الصحيحة لكتابة المقالات ضمن شروط السيو	القيصر	قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress	0	11-03-2019 06:32 AM

اسم العضو		حفظ البيانات؟
كلمة المرور

الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1)