تنظیمات Viewport در CSS: راهنمای جامع
در دنیای طراحی وب ریسپانسیو، تنظیمات viewport یکی از اساسی‌ترین مفاهیم برای نمایش صحیح محتوا در دستگاه‌های مختلف است. این تنظیمات به مرورگر می‌گویند چگونه ابعاد و مقیاس صفحه را با توجه به اندازه نمایشگر مدیریت کند.
بدون تنظیم صحیح viewport، وبسایت‌ها در موبایل به‌صورت زوم‌شده نمایش داده می‌شوند و کاربران مجبور به اسکرول افقی خواهند بود.
متاتگ Viewport در HTML
برای کنترل viewport، از متاتگ زیر در بخش <head> HTML استفاده می‌کنیم:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
این متاتگ شامل پارامترهای کلیدی زیر است:
- width=device-width: عرض صفحه را برابر با عرض دستگاه تنظیم می‌کند
- initial-scale=1.0: سطح زوم اولیه را روی 100% تنظیم می‌کند
- user-scalable=no (اختیاری): امکان زوم توسط کاربر را غیرفعال می‌کند
واحدهای نسبی در CSS برای ریسپانسیو
برای طراحی ریسپانسیو، استفاده از واحدهای نسبی مانند vw (درصدی از عرض viewport) و vh (درصدی از ارتفاع viewport) ضروری است. برای یادگیری بیشتر درباره تکنیک‌های ریسپانسیو، می‌توانید اینجا را انتخاب نمایید.
| واحد |
توضیح |
| vw |
1% از عرض viewport |
| vh |
1% از ارتفاع viewport |
| vmin |
1% از کوچک‌ترین بعد viewport |
تکنیک‌های پیشرفته Viewport
برای طراحی‌های پیچیده‌تر، می‌توان از ویژگی‌های CSS مانند @viewport یا @media استفاده کرد:
- استفاده از Media Queries برای تنظیم استایل‌های مختلف بر اساس ابعاد viewport
- اعمال حداقل و حداکثر مقیاس برای کنترل بهتر نمایش در دستگاه‌های مختلف
- به کارگیری عرض ثابت برای بخش‌هایی که نباید تغییر اندازه دهند
نکته حرفه‌ای: هنگام استفاده از viewport units، همیشه حالت landscape و portrait دستگاه‌ها را در نظر بگیرید و با @media orientation تست کنید.
