ویوپورت واکنش گرا (RWD Viewport)
«ویوپورت (Viewport)» ناحیه قابل مشاهده کاربر از صفحه است. اندازه آن بر اساس دستگاه تغییر می کند؛ بنابراین در طراحی واکنش گرا باید عرض و مقیاس صفحه را کنترل کنیم تا تجربه کاربری در موبایل و دسکتاپ یکدست بماند.
ویوپورت چیست؟
پیش از موبایل و تبلت، صفحات معمولاً ثابت و مخصوص نمایشگرهای رایانه بودند. اما با گسترش دستگاه های کوچک، صفحاتِ ثابت برای ویوپورت خیلی بزرگ بودند و مرورگرها کل صفحه را کوچک نمایی می کردند؛ این راهکار سریع بود، ولی ایده آل نبود.
تنظیم ویوپورت با meta
HTML5 روشی برای کنترل ویوپورت با تگ <meta> معرفی کرد. این تگ را در <head> همه صفحات بگذارید تا عرض صفحه برابر عرض دستگاه و مقیاس اولیه 1 شود.
نمونه تگ ویوپورت
این تنظیمات به مرورگر می گوید ابعاد و بزرگ نمایی صفحه را چگونه مدیریت کند.
/* نمونه CSS تکمیلی مطابق توصیه منبع برای نمایشگرهای کوچک */
@media (max-width: 600px) {
.container { width: 100%; }
}
/* برای اجتناب از اسکرول افقی */
img { max-width: 100%; height: auto; }سازگار کردن محتوا با ویوپورت
کاربران به اسکرول عمودی عادت دارند، نه افقی. پس از عناصر عریضِ ثابت پرهیز کنید، محتوا را به عرض خاصی وابسته نکنید و برای نمایشگرهای کوچک و بزرگ از مدیا کوئری ها استفاده کنید. مقدارهای نسبی مانند width: 100% کمک می کنند.
نکته: اگر عنصر با موقعیت دهی یا عرض مطلق از ویوپورت بیرون می افتد، مقدارها را نسبی کنید و چینش را با مدیا کوئری بازطراحی کنید.
لینک های مرتبط
برای شروع، راهنمای مقدمه RWD و نیز نوشتن استایل جایگزین با @supports را ببینید. همچنین درباره ویوپورت واکنش گرا و توضیحات عملی در web.dev: meta viewport مطالعه کنید.