هنگامی که گوشی های هوشمند به دنیا آمدند متوجه شدند که دنیای وب مکان مناسبی برای آنها نیست. زیرا صفحات وب بر اساس عرض 1000 پیکسل طراحی شده بود و ابعاد همه وب سایتها از ابعاد این گوشی ها بزرگتر بود.
اما انسان های هوشمند نیز برای بهبود شرایط دست به اختراعی جدید زدند و متا تگ viewport را برای برطرف کردن این مشکل ابداع کردند.
آشنایی با متا تگ viewport
این متا تگ در ابتدا توسط شرکت اپل معرفی شد و اطلاعات مفیدی در مورد ابعاد صفحه وب سایت و نحوه زوم وب سایت به مرورگر می دهد. اما اگر به خوبی از این تگ استفاده نشود، صفحات وب سایت در گوشی های موبایل به درستی نمایش داده نمیشود.
این تگ در اکثر قالب های رسپانسیو به این صورت تعریف می شود:
< meta name="viewport" content="width=device-width, initial-scale=1" >
آشنایی با پارامترهای متا تگ viewport:
width
این پارامتر در واقع مهمترین قسمت متا تگ viewport می باشد. به مرورگر می گوید که عرض وب سایت چقدر است. width=device-width عرض وب سایت را برابر با عرض گوشی موبایل در نظر می گیرد. همچنین می توانید یک عدد بر حسب پیکسل width=320 برای مشخص کردن عرض صفحه بکار ببرید.
Initial-scale
این پارامتر میزان زوم اولیه را مشخص می کند و استفاده از initial-scale=1 باعث جلوگیری از زوم پیش فرض مرورگرها می شود.
Maximum-scale
این پارامتر بیشترین مقدار زوم را مشخص می کند و اگر از maximum-scale=1 استفاده شود باعث می شود کاربران نتوانند بر روی عناصر وب سایت زوم کنند زیرا حداکثر مقدار زوم تنظیم شده است. اما به دلیل اینکه در موارد زیادی از قبیل بررسی تصاویر موجود در صفحه نیاز است که کاربران زوم کنند بهتر است این پارامتر تنظیم نشود.
User-scalable
دو مقدار yes و no دریافت می کند.
User-scalable=no بطور کل قابلیت زوم را غیر فعال می کند که بسیار بدتر از maximum-scale=1 می باشد. بهتر است استفاده از قابلیت زوم را به عهده کاربر گذاشت. اگر از این پارامتر استفاده نکنید یا به آن مقدار yes تخصیص دهید به معنی فعال بودن قابلیت زوم خواهد بود.
معرفی توسط اپل و اختلاف شرکتها
همانطور که گفته شد این تگ توسط اپل معرفی شد ولی مایکروسافت از نسخه 10 مرورگر خود تصمیم گرفت این متا تگ را پشتیبانی نکند و بجای آن از استاندارد W3C استفاده کند.
برای رعایت استانداردهای طراحی وب، در کنار استفاده از متا تگ این دستورات را نیز به فایل CSS خود اضافه کنید تا در میان جنگ غولها گرفتار نشوید:
@viewport{
zoom: 1.0;
width: device-width;
}