Viewport به بخشی از صفحات وب که توسط کاربران قابل رؤیت است می‌گویند. HTML5 برای اینکه مدیران سایت‌ها بتوانند کنترل این بخش از سایت را در دست بگیرند روشی معرفی کرده است. این کار از طریق متا تگ viewport قابل انجام است.
در واقع با به‌کارگیری متا تگ viewport، ظاهر صفحه وب با تغییر سایز دستگاه کاربر (موبایل، تبلت و کامپیوتر) تغییر می‌کند. به همین دلیل است که در موبایل منوها و چیدمان صفحه وب تغییر می‌کند و بعضی از بخش‌های غیرضروری حذف می‌شوند. همه این‌ها از طریق متا تگ viewport و تحت کنترل مدیر سایت و با انتخاب او انجام می‌شود.
متا تگ viewport چیست؟
Viewport با اندازه صفحه تغییر پیدا می‌کند، یعنی بر روی صفحه موبایل کوچک‌تر از صفحه کامپیوتر یا لپ‌تاپ است. قبل از تبلت و تلفن‌های همراه، صفحات وب فقط برای صفحه نمایش کامپیوتر طراحی می‌شدند و معمولاً صفحات وب دارای طراحی استاتیک و اندازه‌ای ثابت بودند.
اما وقتی قابلیت وب گردی از طریق تبلت و تلفن‌های همراه هم به وجود آمد؛ اندازه صفحات وب برای نمایشگرهای کوچک و دستگاه‌هایی با سایز اسکرین‌های مختلف بیش از حد بزرگ به نظر می‌رسید. به طوری که کاربران سایت‌ها را با دردسر مواجه می‌کرد و باعث می‌شد تا محتوای سایت در نمایشگرهای کوچک به هم بریزد و کارایی لازم را نداشته باشد.
برای برطرف کردن این مشکل، مرورگرها دست به کار شدند و تکنولوژی‌هایی به وجود آمدند که می‌توانستند اندازه صفحه سایت را با اندازه‌های صفحه نمایشگری که سایت در آن در حال نمایش بود تطبیق دهند.
متا تگ viewport به مرورگر دستورالعمل‌هایی در مورد نحوه کنترل ابعاد صفحه و مقیاس‌بندی آن می‌دهد.
آشنایی با پارامترهای متا تگ viewport
متای viewport چند پارامتر دارد که از طریق هر پارامتر یکی از ویژگی‌های صفحه نمایش تعریف می‌شود.
پارامتر width=device-width
قسمت width=device-width عرض صفحه را مشخص می‌کند. در واقع این قسمت کاری می‌کند که عرض صفحه وب با عرض صفحه نمایش یکی شود.
پارامتر initial-scale=1.0
initial-scale=1.0 سطح بزرگنمایی اولیه صفحه را هنگام اولین بارگذاری آن توسط مرورگر تنظیم می‌کند.
چگونگی تعریف و تنظیم متا تگ Viewport
HTML5 روشی را در اختیار شما قرار داد تا طراحان وب از طریق برچسب <meta>بتوانند viewport را تحت کنترل خود داشته باشند.<