CSS – ویوپورت واکنش‌گرا (RWD Viewport)

ویوپورت چیست؟

ویوپورت ناحیه‌ای است که کاربر از صفحه وب مشاهده می‌کند.

ویوپورت بر اساس دستگاه تغییر می‌کند و در یک تلفن همراه کوچک‌تر از یک مانیتور کامپیوتر است.

قبل از ورود تبلت‌ها و تلفن‌های همراه، صفحات وب فقط برای صفحه‌نمایش‌های کامپیوتر طراحی می‌شدند و معمولاً طراحی‌های ثابت و با اندازه‌های ثابت داشتند.

با ورود تبلت‌ها و تلفن‌های همراه به عرصه مرور وب، صفحات وب با اندازه ثابت بسیار بزرگ‌تر از ویوپورت آن دستگاه‌ها بودند. برای حل این مشکل، مرورگرها صفحات وب را به صورت کامل کوچک‌نمایی می‌کردند تا در صفحه نمایش جا بگیرد. این راه‌حل سریع اما ناقص بود!

تنظیم ویوپورت

HTML5 روشی برای کنترل ویوپورت ارائه کرد که با استفاده از تگ <meta> صورت می‌گیرد.

شما باید تگ ویوپورت زیر را در تمامی صفحات وب خود قرار دهید:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

این تگ به مرورگر دستور می‌دهد که چگونه ابعاد صفحه و مقیاس‌بندی آن را کنترل کند.

  • بخش width=device-width عرض صفحه را بر اساس عرض صفحه‌نمایش دستگاه تنظیم می‌کند (که بر اساس نوع دستگاه متغیر است).
  • بخش initial-scale=1.0 سطح بزرگ‌نمایی اولیه را هنگام بارگذاری صفحه تعیین می‌کند.

اندازه‌دهی محتوا برای ویوپورت

کاربران به مرور عمودی صفحات وب عادت کرده‌اند؛ اما اسکرول افقی برای آن‌ها تجربه بدی محسوب می‌شود. برای بهبود تجربه کاربری، به این نکات توجه کنید:

  1. از عناصر با عرض ثابت بزرگ استفاده نکنید – اگر تصویری بزرگ‌تر از ویوپورت باشد، باعث ایجاد اسکرول افقی می‌شود. محتوا را طوری تنظیم کنید که در ویوپورت جا بگیرد.

  2. محتوا نباید به عرض خاصی از ویوپورت وابسته باشد – ابعاد صفحه‌نمایش‌ها و تعداد پیکسل‌ها در دستگاه‌های مختلف متفاوت است. مطمئن شوید که محتوا به عرض خاصی وابسته نباشد.

  3. از مدیا کوئری‌های CSS استفاده کنید – با استفاده از مدیا کوئری‌ها استایل‌های متفاوتی برای دستگاه‌های بزرگ و کوچک اعمال کنید. به جای استفاده از عرض ثابت، از مقادیر نسبی مثل width: 100% استفاده کنید.

پست های مرتبط

مطالعه این پست ها رو از دست ندین!
JavaScript - رویدادها (Events)

JavaScript – رویدادها (Events)

رویدادهای HTML رویدادها در HTML، “اتفاقاتی” هستند که برای عناصر HTML رخ می‌دهند. این اتفاقات می‌توانند ناشی از کار...

بیشتر بخوانید
JavaScript - سازنده‌های شیء (Object Constructors)

JavaScript – سازنده‌های شیء (Object Constructors)

ساخت آبجکت با تابع سازنده (Object Constructor Function) برای ساخت چندین آبجکت مشابه، از تابع سازنده استفاده می‌شود. این...

بیشتر بخوانید
JavaScript - نمایش شیء (Object Display)

JavaScript – نمایش شیء (Object Display)

نحوه نمایش آبجکت‌ها در جاوااسکریپت هنگام نمایش یک آبجکت جاوااسکریپت به صورت مستقیم، خروجی معمولاً به شکل [object Object]...

بیشتر بخوانید

نظرات

سوالات و نظراتتون رو با ما به اشتراک بذارید

برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید.