نمایشگر واکنشگرا صفحه وب فعلی را در چندین اندازه viewport دستگاه کنار هم نشان میدهد — همه در یک صفحه. ببینید طراحی شما روی iPhone، iPad، تلفنهای Android، لپتاپها و desktop ها چگونه به نظر میرسد. یک viewport را اسکرول کنید و بقیه دنبال میکنند.
تست طراحی واکنشگرا (responsive) بهطور سنتی یعنی تغییر اندازه پنجره مرورگر یا استفاده از device toolbar در DevTools برای جابهجایی بین اندازههای viewport یکییکی. این روش کار میکند، اما در هر لحظه فقط یک اندازه را میبینید — که مقایسه همزمان ظاهر یک بخش در موبایل و دسکتاپ را غیرممکن میکند. Responsive Viewer این مشکل را با رندر کردن صفحه در چند viewport همزمان و نمایش آنها کنار هم روی صفحهنمایش شما حل میکند.
از میان پروفایلهای از پیش تعریفشده دستگاهها (iPhone 15، iPad Pro، Pixel 8، MacBook، دسکتاپ 1440p) انتخاب کنید یا ابعاد سفارشی وارد کنید. هر viewport یک نمونه کاملاً رندرشده از صفحه است، نه یک اسکرینشات ثابت — یکی را اسکرول کنید تا همه بقیه هم به همان موقعیت اسکرول شوند. این اسکرول همگامشده به شما امکان میدهد دقیقاً همان ناحیه از محتوا را در تمام اندازههای دستگاه، در یک نگاه مقایسه کنید.
این سریعترین راه برای پیدا کردن مشکلات واکنشگرایی است: منویی که بهاشتباه شکسته میشود، تصاویری که از ظرف خود بیرون میزنند، متنی که در صفحههای کوچک ناخوانا میشود، یا فاصلهگذاریای که بهطرز نامناسبی جمع میشود. هر viewport را میتوان مستقل از بقیه بین حالت عمودی و افقی چرخاند، که برای تبلتها و دستگاههای تاشو که هر دو جهت در آنها حالت واقعی رایج است اهمیت دارد. ابعاد سفارشی viewport که اضافه میکنید برای جلسه بعدی شما ذخیره میشوند، بنابراین مجموعه breakpointهای خاص یک پروژه هر بار که ابزار را باز میکنید نیازی به وارد کردن دوباره ندارد.
صفحه فعلی را همزمان در چندین اندازه viewport کنار هم ببینید. چیدمانهای موبایل، تبلت و desktop را در یک نگاه مقایسه کنید بدون جابهجایی بین نماها.
از یک کتابخانه پیشتنظیمهای دستگاه محبوب انتخاب کنید: iPhone 15 (393×852)، iPad (820×1180)، iPad Pro (1024×1366)، Pixel 8 (412×915)، MacBook Pro (1440×900) و Desktop Full HD (1920×1080).
هر عرض و ارتفاع سفارشی برای آزمایش اندازههای غیراستاندارد وارد کنید. نیاز به بررسی نحوه ظاهر صفحه در دقیقاً 768px دارید؟ فقط تایپ کنید.
یک viewport را اسکرول کنید و بقیه به همان موقعیت عمودی اسکرول میکنند. این به شما اجازه میدهد همان بخش محتوا را در همه اندازههای دستگاه مقایسه کنید.
هر viewport در داخل یک قاب دستگاه واقعی نمایش داده میشود — bezels تلفن، حاشیههای تبلت، chrome لپتاپ. زمینه بصری به ذینفعان کمک میکند بفهمند کدام viewport کدام دستگاه را نشان میدهد.
دستگاههای جداگانه را فعال و غیرفعال کنید تا روی مقایسههای اندازه خاص تمرکز کنید. فقط موبایل و desktop مقایسه میکنید؟ پیشتنظیم تبلت را لغو انتخاب کنید.
پس از پیادهسازی یک طراحی واکنشگرا، از نمایشگر واکنشگرا استفاده کنید تا تأیید کنید هر بخش در همه اندازههای دستگاه هدف درست به نظر میرسد.
در یک جلسه بررسی به مشتریان نشان دهید وبسایتشان در دستگاههای مختلف چگونه به نظر میرسد. نمای کنار هم فوراً شهودی است.
یک شکست چیدمان در عرض خاصی میبینید؟ یک viewport سفارشی در عرض دقیق پیکسل مشکل اضافه کنید و با viewportهای کمی عریضتر و باریکتر مقایسه کنید.
بررسی کنید عناوین طولانی در موبایل درست wrap میکنند، جداول داده در صفحههای کوچک قابل اسکرول میشوند و CTAها در همه اندازهها مرئی هستند.
از نمای چند دستگاه برای ایجاد تصاویر ویترین طراحی واکنشگرا استفاده کنید. از نمایشگر واکنشگرا screenshot بگیرید که طراحی شما را در 3-4 اندازه دستگاه نشان میدهد.
داک شناور DevSuite Pro را باز کنید و روی آیکون نمایشگر واکنشگرا کلیک کنید. صفحه به حالت multi-viewport با قابهای دستگاه کنار هم منتقل میشود.
نوار دستگاه در بالا پیشتنظیمهای موجود را نشان میدهد. روی دستگاهها کلیک کنید تا روشن/خاموش شوند.
روی دکمه «سفارشی» کلیک کنید و ابعاد خاص عرض × ارتفاع را برای افزودن viewport سفارشی وارد کنید.
هر viewport را اسکرول کنید — بقیه به همان موقعیت دنبال میکنند. مقایسه کنید همان بخش در همه اندازههای دستگاه چگونه به نظر میرسد.
دوباره روی آیکون نمایشگر واکنشگرا کلیک کنید تا از حالت multi-viewport خارج شوید.
DevSuite Pro را به صورت رایگان نصب کنید و بیش از ۶۴ ابزار توسعه را برای مرورگر خود باز کنید.
