ویوپورت (Viewport)

آشنایی با Viewport، meta tag و واحدهای vw/vh برای طراحی واکنش‌گرا

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

Viewport ناحیه قابل مشاهده مرورگر است — بدون نوار ابزار و اسکرول‌بار.

meta tag ضروری

<meta name="viewport" content="width=device-width, initial-scale=1.0">
پارامترتوضیح
width=device-widthعرض ویوپورت = عرض دستگاه
initial-scale=1.0زوم اولیه ۱۰۰٪
maximum-scaleحداکثر زوم

واحدهای ویوپورت

واحدتوضیح
vw۱٪ عرض ویوپورت
vh۱٪ ارتفاع ویوپورت
vminکوچک‌ترین بُعد
vmaxبزرگ‌ترین بُعد
dvhارتفاع داینامیک (مدرن) ⭐

کاربردها

/* هیرو تمام صفحه */
    .hero { height: 100vh; }
    
    /* فونت ریسپانسیو */
    h1 { font-size: clamp(2rem, 5vw, 4rem); }
    
    /* پدینگ نسبی */
    .section { padding: 5vh 5vw; }

مشکل اسکرول‌بار و 100vw

/* 100vw شامل اسکرول‌بار می‌شود! */
    .full-width { width: 100vw; }  /* ❌ سرریز */
    
    /* بهتر */
    .full-width { width: 100%; }   /* ✅ */

بهترین شیوه‌ها

نکات مهم

این مبحث بخشی از دوره آموزش کامل CSS است.

ابزارهای مرتبط