ویوپورت چیست؟
ویوپورت ناحیه‌ای است که کاربر از صفحه وب مشاهده می‌کند.
ویوپورت بر اساس دستگاه تغییر می‌کند و در یک تلفن همراه کوچک‌تر از یک مانیتور کامپیوتر است.
قبل از ورود تبلت‌ها و تلفن‌های همراه، صفحات وب فقط برای صفحه‌نمایش‌های کامپیوتر طراحی می‌شدند و معمولاً طراحی‌های ثابت و با اندازه‌های ثابت داشتند.
با ورود تبلت‌ها و تلفن‌های همراه به عرصه مرور وب، صفحات وب با اندازه ثابت بسیار بزرگ‌تر از ویوپورت آن دستگاه‌ها بودند. برای حل این مشکل، مرورگرها صفحات وب را به صورت کامل کوچک‌نمایی می‌کردند تا در صفحه نمایش جا بگیرد. این راه‌حل سریع اما ناقص بود!
تنظیم ویوپورت
HTML5 روشی برای کنترل ویوپورت ارائه کرد که با استفاده از تگ <meta> صورت می‌گیرد.
شما باید تگ ویوپورت زیر را در تمامی صفحات وب خود قرار دهید:
<meta name="viewport" content="width=device-width, initial-scale=1.0">این تگ به مرورگر دستور می‌دهد که چگونه ابعاد صفحه و مقیاس‌بندی آن را کنترل کند.
- بخش
width=device-widthعرض صفحه را بر اساس عرض صفحه‌نمایش دستگاه تنظیم می‌کند (که بر اساس نوع دستگاه متغیر است). - بخش
initial-scale=1.0سطح بزرگ‌نمایی اولیه را هنگام بارگذاری صفحه تعیین می‌کند.
اندازه‌دهی محتوا برای ویوپورت
کاربران به مرور عمودی صفحات وب عادت کرده‌اند؛ اما اسکرول افقی برای آن‌ها تجربه بدی محسوب می‌شود. برای بهبود تجربه کاربری، به این نکات توجه کنید:
-
از عناصر با عرض ثابت بزرگ استفاده نکنید – اگر تصویری بزرگ‌تر از ویوپورت باشد، باعث ایجاد اسکرول افقی می‌شود. محتوا را طوری تنظیم کنید که در ویوپورت جا بگیرد.
-
محتوا نباید به عرض خاصی از ویوپورت وابسته باشد – ابعاد صفحه‌نمایش‌ها و تعداد پیکسل‌ها در دستگاه‌های مختلف متفاوت است. مطمئن شوید که محتوا به عرض خاصی وابسته نباشد.
-
از مدیا کوئری‌های CSS استفاده کنید – با استفاده از مدیا کوئری‌ها استایل‌های متفاوتی برای دستگاه‌های بزرگ و کوچک اعمال کنید. به جای استفاده از عرض ثابت، از مقادیر نسبی مثل
width: 100%استفاده کنید.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام