API لـ MediaQueryList في JavaScript

عنصر MediaQueryList

صفة 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 هل هناك أي ميكانيزمات إدخال متاحة تسمح للمستخدم بوضع فأرة الكمبيوتر فوق العنصر؟
إضافة في Media Queries Level 4.
any-pointer هل هناك أي ميكانيزمات إدخال متاحة مثل جهاز الإشارة، إذا كان كذلك، فما هو دقة؟
إضافة في Media Queries Level 4.
aspect-ratio نسب العرض والارتفاع للمنظور.
color عدد الأرقام الثنائية لكل مكون لون في جهاز الإخراج.
color-gamut نطاق الألوان المحدد الذي يدعمه واجهة المستخدم والمزود بالأجهزة
هل يسمح الجهاز الرئيسي للإدخال للمستخدم بوضع الفأرة فوق العنصر؟
color-index color-index
عدد الألوان التي يمكن عرضها على الجهاز. grid
هل الجهاز شبكة أم صورة؟ height
طول الواجهة. hover
هل يسمح الجهاز الرئيسي للإدخال للمستخدم بوضع الفأرة فوق العنصر؟
إضافة في Media Queries Level 4. inverted-colors
إضافة في Media Queries Level 4.
هل يقلب المتصفح أو النظام الأساسي الأساسي الألوان؟ light-level
أ级别 الإضاءة الحالي (إضافة في Media Queries Level 4). أكبر نسبة العرض إلى الارتفاع لمنطقة العرض.
max-color أكبر عدد الأرقام لكل جزء من اللون في جهاز الإخراج.
max-color-index أكبر عدد للألوان التي يمكن عرضها على الجهاز.
max-height أكبر طول منطقة العرض، مثل نافذة المتصفح.
max-monochrome أكبر عدد الأرقام لكل "لون" على أجهزة الألوان المبهمة (الدرجات灰اء).
max-resolution أكبر دقة الجهاز، باستخدام dpi أو dpcm.
max-width أكبر عرض منطقة العرض، مثل نافذة المتصفح.
min-aspect-ratio أدنى نسبة العرض إلى الارتفاع لمنطقة العرض.
min-color أدنى عدد الأرقام لكل جزء من اللون في جهاز الإخراج.
min-color-index أكبر عدد للألوان التي يمكن عرضها على الجهاز.
min-height أدنى طول منطقة العرض، مثل نافذة المتصفح.
min-monochrome أدنى عدد الأرقام لكل "لون" على أجهزة الألوان المبهمة (الدرجات灰اء).
min-resolution أدنى دقة الجهاز، باستخدام dpi أو dpcm.
min-width أكبر عرض منطقة العرض، مثل نافذة المتصفح.
monochrome عدد الأرقام لكل "لون" على أجهزة الألوان المبهمة (الدرجات灰اء).
orientation اتجاه الواجهة (أفقية أو عمودية).
overflow-block كيف يتعامل جهاز الإخراج مع المحتوى الذي يتجاوز نطاق الواجهة من خلال المحور الكتلي (إضافة في Media Queries Level 4).
overflow-inline هل يمكن سحب المحتوى الذي يتجاوز نطاق الواجهة من خلال المحور المتداخل (إضافة في Media Queries Level 4).
pointer هل هو جهاز إدخال رئيسي هو إشارة؟ إذا كان كذلك، فما هو دقة؟
إضافة في Media Queries Level 4.
resolution حل جهاز الإخراج، باستخدام dpi أو dpcm.
scan يتم مسح عملية جهاز الإخراج.
scripting هل يمكن استخدام السكربت (مثل JavaScript)؟ (تم إضافة إلى Media Queries Level 4).
تحديث كم يمكن للجهاز التعديل على مظهر المحتوى بسرعة (تم إضافة إلى Media Queries Level 4).
عرض النطاق العريض عرض النطاق العريض.