اصل و اساس طراحی ریسپانسیو استفاده از مدیاکوئری است و در جاوا اسکریپت هم متد ها و آبجکت هایی برای مدیاکوئری در نظر گرفته شده است که در این آموزش به آن می پردازیم.
وقتی با عبارت media query مواجه می شوید، اولین چیزی که به ذهن شما می رسد چیست؟
احتمالا چیزی شبیه به کد زیر در یک فایل CSS به ذهنتان خطور می کند :
1 2 3 4 5 6 7 8 9 | body { background-color: plum; } @media (min-width: 768px) { body { background-color: tomato; } } |
مدیا کوئری CSS ، هسته اصلی هر طراحی ریسپانسیو است. مدیا کوئری یک روش عالی برای ایجاد حالت های مختلف در زمینه های مختلف است . مانند اندازه های متفاوت صفحه نمایش ، حرکت های خاص، طرح رنگی خاص، تعاملات متفاوت و حتی برای دستگاه های مختلف مانند پرنتر ها ،تلویزیون ها ، پروژکتور ها و ….
آیا می دانستید ما در جاوا اسکریپت هم مدیا کوئری داریم؟
بله ، در جاوا اسکریپت هم مدیا کوئری داریم. اگرچه ممکن است در اغلب کد های جاوا اسکریپت استفاده نشوند، ولی قطعا حالت هایی بوجود می آید که مدیا کوئری جاوا اسکریپت در آن بسیار مفید است، مانند اسلایدرها. برای مثال در یک رزولوشن خاص، نیاز است که مجددا هر آیتم اسلایدر پردازش و ساخته شود.
کار با مدیاکوئری ها در جاوا اسکریپت با CSS بسیار متفاوت است گرچه مفاهیم شبیه به هم هستند : یک سری شرایط باید فراهم شود تا یک مجموعه کد اجرا شود.
تابع matchMedia() جاوا اسکریپت
برای اینکه بفهمیم آیا document شرایط تعریف شده در مدیا کوئری را دارد یا خیر، از تابع matchMedia() استفاده میکنیم.
پشتیبانی مرورگر ها از matchMedia()
با اینکه این تابع رسما بخشی از CSS Object Model View Module است و هنوز در مرحله پیشنویس کار است ولی پشتیبانی مرورگر ها از مدیاکوئری جاوا اسکریپت بسیار عالی است تا حدی که اینترنت اکسپلورر 10 با 98.6 درصد پوشش جهانی، از آن پشتیبانی می کند.
اطلاعات کامل تر در ادامه آمده که از سایت Caniuse گرفته شده است. عدد نوشته شده پایین ترین نسخه از
مرورگرهای دسکتاپ
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 9 | 6 | 10 | 12 | 5.1 |
مرورگر های موبایل و تبلت
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 85 | 79 | 3 | 5.0-5.1 |
روش استفاده از تابع matchMedia()
استفاده از مدیا کوئری در جاوا اسکریپت بسیار شبیه به CSS است. به اینصورت که ما یک عبارت متنی مدیاکوئری را به عنوان آرگومان به matchMedia() ارسال میکنیم و نتیجه را با بررسی ویژگی .matches بدست می آوریم.
1 2 3 4 | <pre class="lang:js"> // تعریف کوئری const mediaQuery = window.matchMedia('(min-width: 768px)') </pre> |
مدیا کوئری تعریف شده یک شیء MediaQueryList باز خواهد گرداند. در این شیء اطلاعاتی در مورد مدیاکوئری و ویژگی اصلی مورد نیاز ما که .matches است ذخیره می شود. ویژگی .matches یک ویژگی فقط خواندنی و بولین است که اگر document با مدیا کوئری ارسالی همخوانی داشته باشد مقدار آن true است.
1 2 3 4 5 6 7 8 9 10 | <pre class="lang:js"> // Create a media condition that targets viewports at least 768px wide const mediaQuery = window.matchMedia('(min-width: 768px)') // Check if the media query is true if (mediaQuery.matches) { // Then trigger an alert alert('Media Query Matched!') } </pre> |
این کاربرد اصلی برای مطابقت با شرایط رسانه در جاوا اسکریپت است. ما یک شرط مطابقت (matchMedia() ) ایجاد می کنیم که یک شی (MediaQueryList) را برمی گرداند ، در ادامه آن (.matches) را بررسی می کنیم ، سپس اگر شرایط صحیح ارزیابی شود ( مقدار true باشد ) کارهایی را انجام می دهیم. زیاد هم با CSS تفاوتی ندارد!
اما یک مشکلی وجود دارد. برای مثال اگر ما اندازه پنجره را کوچکتر کنیم، هیچ چیز به روشی که با CSS انجام می شود به روز نمی گردد. به این دلیل که .matches برای بررسی های فوری یکبار مصرف مناسب است اما قادر به بررسی مداوم تغییرات نیست. این بدان معنی است که ما باید…
به تغییرات گوش بدهیم
شیء MediaQueryList یک متد addListener() (و سپس removeListener()) دارد که تابع برگشتی را می پذیرد (با رویداد .onchange اجرا می شود) که با تغییر وضعیت مدیا کوئری ، فراخوانی می شود. به عبارت دیگر ، در صورت تغییر شرایط ، می توانیم توابع دیگری را اجرا کنیم ، که به ما امکان می دهد تا به تغییرات شرایط پاسخ دهیم.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <pre class="lang:js"> // Create a condition that targets viewports at least 768px wide const mediaQuery = window.matchMedia('(min-width: 768px)'); function handleTabletChange(e) { // Check if the media query is true if (e.matches) { // Then log the following message to the console console.log('Media Query Matched!'); } } // Register event listener mediaQuery.addListener(handleTabletChange); // Initial check handleTabletChange(mediaQuery); </pre> |
استفاده از matchMedia() و MediaQueryList به ما قدرت یکسانی می دهد که نه تنها با شرایط رسانه ای که CSS فراهم می کند مطابقت دارد، بلکه برای پاسخگویی فعال به تغییر شرایط نیز کارایی دارد.
هنگامی که یک شنونده رویداد بوسیله addListener() ثبت می کنید، در ابتدا و بصورت خودکار اجرا نمی شود. ما باید تابع کنترل کننده رویداد را به صورت دستی فراخوانی کنیم و مدیاکوئری را به عنوان آرگومان به آن پاس بدهیم.
See the Pen JavaScript Media Queries #Example by Maverick (@rema) on CodePen.
روش قدیمی انجام کار
به خاطر زمینه سازی – و کمی مرور خاطرات – من مایلم که روش قدیمی ، اما هنوز هم پرطرفدار انجام “مدیا کوئری” در جاوا اسکریپت را توضیح دهم (این نقل قول ها در اینجا مهم است) . متداول ترین روش، اتصال به شنونده رویداد resize است که windows.innerWidth یا window.innerHeight را بررسی می کند.
هنوز چیزی شبیه به این را در کد های جاوا اسکریپت خواهید دید:
1 2 3 4 5 6 7 8 9 10 11 12 | <pre class="lang:js"> function checkMediaQuery() { // If the inner width of the window is greater then 768px if (window.innerWidth > 768) { // Then log this message to the console console.log('Media Query Matched!'); } } // Add a listener for when the window resizes window.addEventListener('resize', checkMediaQuery); </pre> |
از آنجا که رویداد تغییر اندازه بر روی هر تغییر اندازه مرورگر فراخوانی می شود ، یک عملیات پرهزینه است! با نگاهی به تأثیر عملکرد یک صفحه خالی می توان تفاوت را مشاهده کرد.
استفاده از روش قدیمی، محاسبات را 157 درصد افزایش میدهد.
بعبارت دیگر و بیانی ساده تر به ازای 208 رویداد تغییر سایز فقط 6 رویداد تطبیق رسانه رخ می دهد.
حتی اگر مشکلات عملکردی روش قدیم را در نظر نگیریم ، باز هم تغییر اندازه به این معناست که ما نمی توانیم کد هایی برای بررسی پیشرفته تر رسانه؛ مانند مواردی از جمله چاپ و جهت گیری نمایش رسانه، بنویسیم.
بنابراین ، در حالی که این روش، رفتار “مدیا کوئری” را تقلید می کند و اجازه می دهد ما عرض صفحه نمایش را مطابقت دهیم ، اما نمی تواند بسیاری از موارد دیگر را مطابقت دهد – و ما می دانیم که مدیاکوئری واقعی قادر به کارهای بسیار بیشتری هستند.
نتیجه
این مقاله نگاهی به مدیاکوئری در جاوا اسکریپت بود. ما در مورد چگونگی استفاده از matchMedia() برای بررسی شرایط رسانه و ایجاد شیء MediaQueryList صحبت کردیم که به ما امکان می دهد در برابر آن شرایط، بررسی های یک باره (.matches) و مداوم (addListener()) را انجام دهیم تا بتوانیم به تغییرات رسانه (.onchange) پاسخ دهیم؛ البته با فراخوانی توابع.
همچنین دیدیم که در روش قدیم برای انجام کار به رویداد resize در پنجره (window) گوش می دادیم. این روش هنوز هم به طور گسترده استفاده می شود و یک روش کاملا قانونی برای پاسخ به تغییرات اندازه پنجره (window.innerWidth) است؛ در حالی که قادر به انجام بررسی در شرایط پیشرفته رسانه نیست.
در پایان به یک مثال مفید اشاره می کنیم که به روش قدیمی قابل دستیابی نیست. برای مثال با استفاده از یک پرس و جو رسانه ، بررسی می کنیم که آیا دستگاه کاربر در حالت افقی است یا خیر. این روش هنگام توسعه بازی های HTML5 معمول است و بهتر است در یک دستگاه تلفن همراه مشاهده شود.
See the Pen JavaScript Screen Orientation Query by Maverick (@rema) on CodePen.
منبع : css-tricks.com
