روش Window matchMedia()

تعریف و استفاده

matchMedia() این روش شناساییگرهای رسانه‌ای با نتایج جستجو را بازمی‌گرداند.

لطفاً به: مراجعه کنید

موضوع MediaQueryList

شناساییگرهای رسانه‌ای

شناساییگرهای رسانه‌ای روش matchMedia() می‌تواند هر ویژگی رسانه‌ای از قوانین @media CSS باشد، مانند min-height،min-width،orientation و غیره.

مثال

matchMedia("(max-height: 480px)").matches);

matchMedia("(max-width: 640px)").matches);

مثال

مثال 1

آیا صفحه نمایش/نمای کاربری بزرگتر از 700 پیکسل است؟

if (window.matchMedia("(max-width: 700px)").matches) {
  // عرض视‌وگير کمتر یا برابر با 700 پیکسل است
}
  // عرض视‌وگير بزرگتر از 700 پیکسل است
}

آزمایش کنید

توضیح مثال

این مثال شناساییگرهای رسانه‌ای را اجرا می‌کند و آن‌ها را با وضعیت فعلی پنجره مقایسه می‌کند.

برای اجرای شناساییگرهای رسانه‌ای پاسخگو در حالت تغییر وضعیت پنجره، شناساییگر رویداد را به شناساییگر MediaQueryList اضافه کنید (لطفاً به "مثال‌های بیشتر" زیر مراجعه کنید):

مثال 2

اگر اندازه视‌وگير کمتر یا برابر با 500 پیکسل باشد، رنگ پس‌زمینه را به زرد تغییر دهید، در غیر این صورت به صورتی تغییر دهید:

// شناساییگر تطابق ایجاد شود
function myFunction(x) {
  if (x.matches) {
    document.body.style.backgroundColor = "yellow";
  }
    document.body.style.backgroundColor = "pink";
  }
}
// // شناساییگر MediaQueryList ایجاد شود
const mmObj = window.matchMedia("(max-width: 700px)");
// در زمان اجرا، شناساییگر match را فراخوانی کنید:
myFunction(mmObj);
// شناساییگر match به عنوان شناساییگر تغییر وضعیت اضافه شود:
mmObj.addListener(myFunction);

آزمایش کنید

زبان نوشتاری

window.matchMedia("mediaQuery)

پارامتر

پارامتر توصیف
mediaQuery ضروری. رشته‌ای که نشان‌دهنده جستجوی mediacquery است.

مقدار بازگشتی

نوع توصیف
موضوع موضوع MediaQueryList با نتایج جستجوی mediacquery.

پشتیبانی مرورگر

همه مرورگرها پشتیبانی می‌کنند matchMedia():

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
پشتیبانی 11 پشتیبانی پشتیبانی پشتیبانی پشتیبانی