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