المان meta viewport یک مؤلفه حیاتی در طراحی وب واکنشگرا (Responsive) است.
این یک المان خاص از نوع meta در HTML است که دستورالعملهایی را به مرورگر میدهد تا ابعاد و مقیاسبندی (Scaling) صفحه را در دستگاههای مختلف، بهویژه در گوشیهای موبایل و تبلتها، کنترل کند.
بیایید به نحو (Syntax) پایه المان متا ویوپورت نگاهی بیندازیم:
<meta name="viewport" content="width=device-width, initial-scale=1.0">این المان معمولاً در بخش <head> سند HTML شما قرار میگیرد. اما هر بخش از این المان چه معنایی دارد؟
بخش width=device-width به مرورگر میگوید که عرض صفحه را مطابق با عرض صفحه نمایشِ دستگاه تنظیم کند. این امر برای ایجاد چیدمانهای واکنشگرا که با اندازههای مختلف صفحه نمایش سازگار میشوند، ضروری است.
بخش initial-scale=1.0 سطح زوم اولیه را در اولین باری که صفحه بارگذاری میشود، تنظیم میکند. مقدار 1.0 به این معنی است که صفحه با زوم ۱۰۰٪ و بدون هیچگونه تغییر مقیاسی نمایش داده میشود.
با استفاده از المان متا ویوپورت، شما اطمینان حاصل میکنید که صفحات وب شما در دستگاههای موبایل به درستی نمایش داده میشوند.
بدون این المان، مرورگرهای موبایل معمولاً صفحه را با عرض صفحه نمایش دسکتاپ رندر کرده و سپس آن را کوچک میکنند (Scale down)، که این کار میتواند منجر به تجربه کاربری ضعیف با متنهای بسیار ریز و ناخوانا شود.
المان متا ویوپورت همچنین به شما اجازه میدهد کنترل کنید که آیا کاربران میتوانند روی صفحات وب شما زوم کنند یا خیر.
اگرچه امکان غیرفعال کردن زوم با ویژگی user-scalable=no وجود دارد، اما عموماً توصیه میشود به دلایل دسترسیپذیری (Accessibility) از این کار خودداری کنید.
بسیاری از کاربران، به ویژه افرادی که دارای اختلالات بینایی هستند، برای خوانایی بهتر به قابلیت زوم وابسته هستند.
در اینجا مثالی از کاری که نباید انجام دهید آورده شده است:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
در عوض، بهتر است وبسایت خود را طوری طراحی کنید که واکنشگرا باشد و در سطوح مختلف زوم قابل خواندن باقی بماند تا اطمینان حاصل شود که همه کاربران میتوانند به راحتی به محتوای شما دسترسی داشته باشند.
المان متا ویوپورت نقشی کلیدی در ایجاد وبسایتهای بهینه برای موبایل (Mobile-friendly) ایفا میکند.
این المان تضمین میکند که طراحیهای واکنشگرای شما که با دقت ساخته شدهاند، همانطور که انتظار میرود در دستگاههای مختلف نمایش داده شوند و تجربه کاربری بهتری را برای همه بازدیدکنندگان سایت شما فراهم کنند.
سوالات
۱. هدف اصلی تگ <meta name="viewport"> چیست؟
- بهبود سرعت بارگذاری وبسایت.
- کنترل ابعاد و مقیاسبندی صفحه در دستگاههای مختلف.
- ارائه توضیحات صفحه برای موتورهای جستجو.
- فعال کردن قابلیتهای جاوا اسکریپت.
۲. عبارت width=device-width در تگ متا ویوپورت چه کاری انجام میدهد؟
- عرض تمام تصاویر را با عرض دستگاه مطابقت میدهد.
- به مرورگر میگوید که عرض صفحه را با عرض صفحه نمایش دستگاه مطابقت دهد.
- اندازه فونت را بر اساس عرض دستگاه تنظیم میکند.
- حداکثر عرض وبسایت را محدود میکند.
۳. چرا عموماً توصیه میشود که از user-scalable=no در تگ متا ویوپورت استفاده نشود؟
- میتواند باعث از کار افتادن (Crash) وبسایت در برخی دستگاهها شود.
- مانع از ایندکس شدن وبسایت توسط موتورهای جستجو میشود.
- میتواند برای کاربرانی که نیاز به زوم دارند، مشکلات دسترسیپذیری ایجاد کند.
- باعث میشود وبسایت در دستگاههای موبایل دیرتر بارگذاری شود.