متا تگ “viewport” یکی از مهمترین متا تگ‌ها در HTML است که برای تعیین نمایش و مقیاس مناسب وب‌سایت بر روی دستگاه‌های مختلف مورد استفاده قرار می‌گیرد. این متا تگ به وب‌سایت‌ها کمک می‌کند تا بهترین تجربه کاربری را برای کاربران در دستگاه‌های مختلف ارائه دهند. دستگاه‌های مختلف از اندازه‌ها و نسبت‌های صفحه نمایش مختلفی برخوردارند، از جمله دستگاه‌های موبایل، تبلت‌ها، لپتاپ‌ها و کامپیوترها. به عبارت دیگر، این متا تگ به وب‌سایت می‌گوید چگونه باید محتوا را بر روی دستگاه مورد نظر نمایش دهد.
وظیفه اصلی متا تگ “viewport” به شکل زیر است:
تعیین پهنای دستگاه (Width): شما می‌توانید با استفاده از متا تگ “viewport” پهنای دستگاه مخاطب را مشخص کنید. این به وب‌سایت کمک می‌کند تا بهترین اندازه و مقیاس را برای صفحه نمایش انتخاب کند. به عنوان مثال:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
در این مثال، متا تگ به وب‌سایت می‌گوید که پهنای دستگاه را با استفاده از “device-width” تعیین کند و مقیاس اولیه را برابر با 1.0 قرار دهد.
پیکربندی مقیاس (Scale): می‌توانید مقیاس اولیه (initial scale) صفحه را تنظیم کنید تا بهترین تجربه را برای کاربران فراهم کنید. این به معنای زوم اولیه صفحه است. به عنوان مثال:
<meta name="viewport" content="initial-scale=1.0">این تگ به مرورگر می‌گوید که مقیاس اولیه را برابر با 1.0 قرار دهد.
ممنوع کردن زوم تا کاربر: شما می‌توانید زوم دستی توسط کاربر را غیرفعال کنید. این کاربردی است برای جلوگیری از زوم ناخواسته صفحه در دستگاه‌های لمسی. به عنوان مثال:
<meta name="viewport" content="user-scalable=no">این تگ به مرورگر می‌گوید که کاربر نمی‌تواند به صورت دستی زوم کند.
متا تگ “viewport” بسیار مهم است، به خصوص در توسعه وب‌سایت‌های واکنش‌گرا (Responsive) که باید روی دستگاه‌های مختلف به درستی نمایش داده شوند. با استفاده صحیح از این تگ، می‌توانید تجربه کاربری بهتری را فراهم کنید و از ریسک اشکالات نمایش در دستگاه‌های مختلف جلوگیری کنید.
تغییر پهنای دستگاه با تغییر جهت (Orientation Change): شما می‌توانید رفتار وب‌سایت را برای تغییر جهت دستگاه (از عمودی به افقی یا برعکس) تنظیم کنید. این مورد مخصوصاً در وب‌سایت‌هایی که به شکل مختصر در حالت عمودی و به شکل گسترده‌تر در حالت افقی نمایش داده می‌شوند، کاربرد دارد. به عنوان مثال:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
این تگ به مرورگر می‌گوید که هنگامی که جهت دستگاه تغییر می‌کند، پهنای دستگاه را با “device-width” حفظ کند و امکان زوم توسط کاربر را غیرفعال کند.
تنظیمات مرتبط با اندازه معیاری (Viewport Meta Tags for Responsive Design): در توسعه وب‌سایت‌های واکنش‌گرا که برای انواع مختلف دستگاه‌ها بهینه شده‌اند، متا تگ “viewport” برای تعیین اندازه معیاری مناسب استفاده می‌شود. به عنوان مثال:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
این تگ به مرورگر می‌گوید که عرض صفحه باید برابر با عرض دستگاه (device-width) باشد و مقیاس اولیه را برابر با 1.0 قرار دهد.
متا تگ “viewport” بسیار مهم است زیرا تاثیر زیادی بر روی تجربه کاربری وب‌سایت دارد. با تنظیم درست این تگ، می‌توانید وب‌سایت خود را به درستی بر روی دستگاه‌های مختلف نمایش دهید و به کاربران این امکان را بدهید تا به راحتی و با بهره‌وری از سایت شما استفاده کنند. این تگ به خصوص در توسعه وب‌سایت‌های واکنش‌گرا و موبایل بسیار حیاتی است.
