API MediaQueryList JavaScript

عنصر

ویژگی MediaQueryList عنصر

ویژگی MediaQueryList عنصرعنصرعنصر

ویژگی MediaQueryList عنصر را به صورت زیر دسترسی پیدا کنید:

window.matchMedia() یا فقط matchMedia():

مثال

const mqlObj = window.matchMedia();
const mqlObj = matchMedia();

یک بار امتحان کنید

لطفاً به:

روش window.matchMedia()

نوع MediaQueryList

نوع توضیح
matches مقدار بولانی. اگر مستند با پرسش مطابقت دارد، true، در غیر این صورت false.
media مقدار رشته‌ای. پرسش رسانه (لیست).

روش MediaQueryList

روش توضیح
addListener() یک شنونده جدید اضافه کنید، که هر زمان که نتیجه ارزیابی پرسش رسانه تغییر کند، این تابع اجرا می‌شود.
removeListener()

شنونده قبلی که قبلاً اضافه شده است را از لیست پرسش رسانه حذف کنید.

اگر شنونده مشخص شده در لیست نیست، هیچ عملی انجام نمی‌شود.

پرسش رسانه

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

مثال

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

یک بار امتحان کنید

نوع رسانه

مقدار توضیح
all پیش‌فرض. برای همه دستگاه‌های نوع رسانه استفاده می‌شود.
print برای چاپگر استفاده می‌شود.
screen برای کامپیوترهای نمایشی، تبلت‌ها، گوشی‌های هوشمند و غیره استفاده می‌شود.
speech برای صفحه‌ای که باید به صورت بلند خوانده شود استفاده می‌شود.

مشخصات رسانه

مقدار توضیح
any-hover آیا هیچ مکانیزم ورودی موجودی وجود دارد که به کاربر اجازه می‌دهد موس را روی عنصر نگه دارد؟
(در سطح 4 معیارهای رسانه‌ای اضافه شده).
any-pointer آیا هیچ مکانیزم ورودی موجودی وجود دارد که دستگاه اشاره‌گر باشد؟ اگر بله، دقت آن چگونه است؟
(در سطح 4 معیارهای رسانه‌ای اضافه شده).
aspect-ratio تناسب ارتفاع و عرض视‌واقعی.
color تعداد بیت هر جزء رنگی دستگاه خروجی.
color-gamut دامنه رنگ‌های تقریبی پشتیبانی شده توسط کارگزار کاربر و دستگاه‌های خروجی
(در سطح 4 معیارهای رسانه‌ای اضافه شده)
color-index تعداد رنگی که دستگاه می‌تواند نمایش دهد.
grid دستگاه شبکه یا بیت‌مپ است.
height ارتفاع视گاه.
hover آیا مکانیزم ورودی اصلی اجازه می‌دهد که کاربر ماوس را روی عنصر قرار دهد؟
(در سطح 4 معیارهای رسانه‌ای اضافه شده)
inverted-colors آیا مرورگر یا سیستم عامل پایه‌ای رنگ‌ها را معکوس می‌کند؟
(در سطح 4 معیارهای رسانه‌ای اضافه شده).
light-level سطح نور محیط فعلی (در سطح 4 معیارهای رسانه‌ای اضافه شده).
max-aspect-ratio نسبت بیشینه عرض به ارتفاع ناحیه نمایش، به عنوان مثال پنجره مرورگر.
max-color تعداد بیت بیشینه هر رنگ‌ساز (color component) در دستگاه خروجی.
max-color-index تعداد بیشینه رنگی که دستگاه می‌تواند نمایش دهد.
max-height ارتفاع بیشینه ناحیه نمایش، به عنوان مثال پنجره مرورگر.
max-monochrome تعداد بیت بیشینه هر «رنگ» در دستگاه‌های تک‌رنگ (گرayscale).
max-resolution رزولوشن بیشینه دستگاه، از dpi یا dpcm استفاده می‌شود.
max-width عرض بیشینه ناحیه نمایش، به عنوان مثال پنجره مرورگر.
min-aspect-ratio نسبت کمینه عرض به ارتفاع ناحیه نمایش، به عنوان مثال پنجره مرورگر.
min-color تعداد بیت کمینه هر رنگ‌ساز (color component) در دستگاه خروجی.
min-color-index تعداد最少 رنگی که دستگاه می‌تواند نمایش دهد.
min-height ارتفاع کمینه ناحیه نمایش، به عنوان مثال پنجره مرورگر.
min-monochrome تعداد بیت کمینه هر «رنگ» در دستگاه‌های تک‌رنگ (گرayscale).
min-resolution رزولوشن کمینه دستگاه، از dpi یا dpcm استفاده می‌شود.
min-width عرض کمینه ناحیه نمایش، به عنوان مثال پنجره مرورگر.
monochrome تعداد بیت هر «رنگ» در دستگاه‌های تک‌رنگ (گرayscale).
orientation جهت视گاه (حالت افقی یا عمودی).
overflow-block دستگاه خروجی چگونه با محتوایی که از محدوده دیدگاه جاری می‌گذرد، در محور بلوک برخورد می‌کند؟ (در سطح 4 معیارهای رسانه‌ای اضافه شده).
overflow-inline آیا می‌توان محتوای جاری در محدوده‌ای که از محدوده دیدگاه جاری می‌گذرد، اسکرول کرد؟ (در سطح 4 معیارهای رسانه‌ای اضافه شده).
pointer آیا مکانیزم ورودی اصلی دستگاه اشاره‌گر است؟ اگر بله، دقت آن چگونه است؟
(در سطح 4 معیارهای رسانه‌ای اضافه شده).
resolution رزولوشن دستگاه خروجی، از dpi یا dpcm استفاده می‌شود.
scan فرآیند اسکن دستگاه خروجی.
scripting آیا می‌توان از اسکریپت‌ها (مثلاً JavaScript) استفاده کرد؟ (در سطح 4 Media Queries اضافه شده).
update چقدر سریع می‌تواند دستگاه خروجی ظاهر محتوای خود را تغییر دهد (در سطح 4 Media Queries اضافه شده).
عرض عرض视گاه.