طراحی سایت ریسپانسیو با matchMedia در جاوااسکریپت
در طراحی رابط کاربری سایت، برای ایجاد سایت واکنشگرا یا Responsive از media query در CSS استفاده میکنیم. با این روش، بر اساس ویژگیهایی مانند عرض و ارتفاع پنجره، جهت صفحه یا وضوح نمایشگر، استایلها تغییر میکنند. اما گاهی نیاز داریم علاوه بر استایل، منطق و رفتار اجزای سایت نیز بسته به شرایط نمایش تغییر کند. متد window.matchMedia در جاوااسکریپت برای همین منظور طراحی شده است.
در ادامه با این روش بیشتر آشنا میشویم و کاربردها و مزایای آن را مرور میکنیم.
چرا باید از matchMedia استفاده کنیم؟
- تشخیص شرایط نمایش در کد جاوااسکریپت
میتوان بهصورت مستقیم بررسی کرد که آیا صفحه با یک media query خاص همخوانی دارد یا خیر. - واکنش به تغییرات در لحظه
با استفاده از رویداد change میتوان در زمان تغییر اندازه یا شرایط نمایشگر، عملکرد سایت را مدیریت کرد. - هماهنگی کامل با CSS
از همان قوانین media query استفاده میشود و نیازی به نوشتن شرطهای پیچیده و مشکل نیست. - پشتیبانی از ویژگیهای پیچیده
امکان بررسی شرایطی که با اندازهگیری سادهی پنجره (window.innerWidth) به دست نمیآید، مانند نسبت تصویر یا جهت نمایش.
به مثال زیر توجه کنید:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
const mq = window.matchMedia("(max-width: 600px)"); // بررسی وضعیت فعلی if (mq.matches) { console.log("نمایشگر کوچک است"); } else { console.log("نمایشگر بزرگتر از ۶۰۰ پیکسل است"); } // واکنش به تغییرات در شرایط نمایشگر mq.addEventListener("change", event => { if (event.matches) { console.log("ورود به حالت موبایل"); } else { console.log("بازگشت به حالت دسکتاپ"); } }); |
وجود matchMedia چه مزیتهایی دارد ؟
با کمک این روش میتوانیم سایتهایی طراحی کنیم که قابلیتهای رسپانسیو پیشرفتهتری دارند و تجربهی کاربری بالاتری را برای مخاطبان فراهم میکنند. دو مزیت اصلی matchMedia شامل موارد زیر است.
- اندازهگیری دستی با گرفتن عرض یا ارتفاع پنجره در رویداد resize نیاز به کدنویسی بیشتر دارد و پشتیبانی از شرایط پیچیده مانند (orientation: landscape) یا (prefers-color-scheme: dark) گاهی امکانپذیر نیست.
- استفادهی تنها از CSS media محدود به تغییر ظاهر و استایل سایت است و نمیتواند رفتارهای پویا در سطح جاوااسکریپت را مدیریت کند.
محدودیتها
با وجود اینکه این روش مزیتهای قابل توجهی ایجاد میکند با این حال محدودیتهایی نیز دارد که مخصوصا در پروژههای بزرگ باید به آن توجه کنیم.
- نیاز به آشنایی با سینتکس media query در CSS برای نوشتن شرایط دقیق.
- مدیریت درست لیسنرها برای جلوگیری از نشت حافظه (Memory Leak) در پروژههای بزرگ.
- در مرورگرهای بسیار قدیمی ممکن است نیاز به پلیفیل باشد، هرچند پشتیبانی کنونی بسیار گسترده است.