نافذة المباراة
مثال 1
هل الشاشة / منفذ العرض أكبر من 700 بكسل من حيث العرض:
if (window.matchMedia("(max-width: 700px)").matches) {
// Viewport is less or equal to 700 pixels wide
} else {
// Viewport is greater than 700 pixels wide
}
التعريف والاستخدام
تقوم matchMedia()الطريقة بإرجاع MediaQueryList بالنتائج من الاستعلام.
أنظر أيضا:
تساؤلات الإعلام
يمكن أن تكون استعلامات الوسائط الخاصة matchMedia()بالطريقة أيًا من ميزات الوسائط الخاصة
بقاعدة CSSmedia ، مثل min-height ، و min-width ، و direction ، وما إلى ذلك.
أمثلة
matchMedia("(max-height: 480px)").matches);
matchMedia("(max-width: 640px)").matches);
بناء الجملة
window.matchMedia(mediaQuery)
المعلمات
| Parameter | Description |
| mediaQuery | Required. A string representing a media query. |
قيمة الإرجاع
| نوع | وصف |
| شيء | كائن MediaQueryList بنتائج استعلام الوسائط. |
شرح الأمثلة
يقوم المثال الأول في هذه الصفحة بتشغيل استعلام وسائط ويقارنه بحالة النافذة الحالية .
لتشغيل استعلام وسائط سريع الاستجابة كلما تغيرت حالة النافذة ، أضف مستمع حدث إلى كائن MediaQueryList (انظر "مزيد من الأمثلة" أدناه):
مزيد من الأمثلة
إذا كان حجم إطار العرض أقل من 500 بكسل أو يساوي عرضه ، فاضبط لون الخلفية على اللون الأصفر ، وبخلاف ذلك على اللون الوردي:
// Create a match function
function myFunction(x) {
if (x.matches) {
document.body.style.backgroundColor = "yellow";
} else {
document.body.style.backgroundColor = "pink";
}
}
// // Create a MediaQueryList object
const mmObj = window.matchMedia("(max-width: 700px)")
// Call the match function at run time:
myFunction(mmObj);
// Add the match function as a listener for state changes:
mmObj.addListener(myFunction);
دعم المتصفح
matchMedia() مدعوم في جميع المتصفحات الحديثة:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 11 | Yes | Yes | Yes | Yes |