نمایشگر واکنشگرا صفحه وب فعلی را در چندین اندازه viewport دستگاه کنار هم نشان میدهد — همه در یک صفحه. ببینید طراحی شما روی iPhone، iPad، تلفنهای Android، لپتاپها و desktop ها چگونه به نظر میرسد. یک viewport را اسکرول کنید و بقیه دنبال میکنند.
آزمایش طراحیهای واکنشگرا بهطور سنتی به معنی تغییر اندازه پنجره مرورگر یا استفاده از نوار ابزار دستگاه DevTools است. نمایشگر واکنشگرا این را با رندر صفحه در چندین viewport بهطور همزمان حل میکند. از پروفایلهای دستگاه پیشتنظیم انتخاب کنید یا ابعاد سفارشی وارد کنید. اسکرول هماهنگشده به شما اجازه میدهد همان بخش محتوا را در همه اندازههای دستگاه مقایسه کنید.
صفحه فعلی را همزمان در چندین اندازه 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 را به صورت رایگان نصب کنید و بیش از ۳۹ ابزار توسعه را برای مرورگر خود باز کنید.
