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% استفاده کنید.

Related posts

Don't miss reading these posts!
JavaScript - کلمه کلیدی Let (Let)

JavaScript – کلمه کلیدی Let (Let)

تعریف let کلیدواژه let در ES6 (2015) معرفی شد و دارای ویژگی‌های خاصی است که آن را از var...

Read more
JavaScript - متغیرها (Variables)

JavaScript – متغیرها (Variables)

متغیرها در جاوا اسکریپت متغیرها در جاوا اسکریپت به عنوان ظرف‌هایی برای ذخیره‌سازی داده‌ها استفاده می‌شوند و می‌توانند به...

Read more
JavaScript - کامنت‌ها (Comments)

JavaScript – کامنت‌ها (Comments)

کامنت‌ها در جاوا اسکریپت کامنت‌ها در جاوا اسکریپت به برنامه‌نویسان این امکان را می‌دهند تا توضیحاتی را به کد...

Read more

Comments

Share your comments with us

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