متا تگ Viewport یکی از تگ‌های مهم HTML است که به مرورگر اعلام می‌کند صفحه وب را با چه عرضی نمایش دهد و مقیاس اولیه محتوا چگونه باشد. این تگ بیشتر در نمایش صحیح صفحات وب روی گوشی‌های موبایل و تبلت اهمیت دارد و یکی از اجزای پایه طراحی صفحات واکنش‌گرا یا Responsive است.
کد رایج متا تگ Viewport به شکل زیر نوشته می‌شود:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
این کد معمولاً داخل بخش <head> صفحه قرار می‌گیرد. با استفاده از آن، مرورگر موبایل می‌تواند عرض ناحیه نمایش صفحه را با عرض دستگاه هماهنگ کند و محتوا را در مقیاس مناسب نمایش دهد.
برای درک بهتر، فرض کنید یک کتاب را روی میز مطالعه می‌کنید. اگر کتاب بسیار بزرگ باشد، نمی‌توانید تمام یک صفحه را هم‌زمان ببینید و مجبور می‌شوید آن را از فاصله دور نگاه کنید. اما اگر اندازه صفحه کتاب با محدوده دید شما هماهنگ باشد، متن و تصاویر با اندازه مناسب در مقابل شما قرار می‌گیرند. Viewport نیز تا حدی همین نقش را برای مرورگر در تعیین محدوده نمایش صفحه ایفا می‌کند.
Viewport در طراحی سایت به چه معناست؟
Viewport به محدوده‌ای از پنجره مرورگر گفته می‌شود که محتوای صفحه در آن قابل مشاهده است. این محدوده در دستگاه‌های مختلف یکسان نیست؛ صفحه‌ای که روی مانیتور کامپیوتر عرض زیادی دارد، در یک گوشی موبایل فضای بسیار کمتری برای نمایش محتوا در اختیار دارد.
مشکل از جایی شروع می‌شود که مرورگر موبایل بخواهد صفحه‌ای را که برای نمایشگر بزرگ طراحی شده، بدون در نظر گرفتن عرض واقعی دستگاه نمایش دهد. در چنین شرایطی ممکن است مرورگر محتوا را با یک عرض مجازی بزرگ‌تر رندر کرده و سپس آن را کوچک کند تا در صفحه موبایل جا شود. نتیجه می‌تواند نوشته‌های بسیار ریز، نیاز به زوم و اسکرول افقی باشد.
متا تگ Viewport به مرورگر کمک می‌کند تا بداند صفحه باید متناسب با عرض دستگاه پردازش و نمایش داده شود.
کاربرد متا تگ Viewport چیست؟
مهم‌ترین کاربرد متا تگ Viewport، هماهنگ کردن نحوه نمایش صفحه با اندازه صفحه‌نمایش دستگاه است. این موضوع مخصوصاً برای صفحات موبایل اهمیت دارد.
برای مثال، تصور کنید یک منوی رستوران به صورت یک صفحه بزرگ طراحی شده باشد. وقتی همین صفحه را روی گوشی باز می‌کنید، اگر مرورگر تصور کند عرض صفحه بسیار بیشتر از عرض گوشی است، ممکن است تمام منو را کوچک نمایش دهد. در این حالت خواندن قیمت‌ها و توضیحات غذا دشوار می‌شود و کاربر مجبور است صفحه را بزرگ‌نمایی کند.
اما با تنظیم صحیح Viewport و استفاده از طراحی واکنش‌گرا، ساختار صفحه می‌تواند متناسب با فضای موجود تغییر کند.
به طور خلاصه، Viewport به موارد زیر کمک می‌کند:
- نمایش صحیح صفحه در گوشی و تبلت
- هماهنگ شدن عرض صفحه با دستگاه
- جلوگیری از نمایش بسیار کوچک محتوا
- عملکرد صحیح‌تر Media Queryها در طراحی واکنش‌گرا
- ایجاد تجربه کاربری مناسب‌تر در نمایشگرهای کوچک
البته باید توجه داشت که Viewport به تنهایی یک سایت را Responsive نمی‌کند. این تگ فقط یکی از پیش‌نیازهای مهم برای نمایش صحیح طراحی واکنش‌گرا است. ساختار CSS، Media Queryها، اندازه تصاویر، فونت‌ها و سایر اجزای صفحه نیز باید برای نمایشگرهای مختلف بهینه شده باشند.
کد استاندارد متا تگ Viewport چیست؟
در بیشتر وب‌سایت‌ها استفاده از کد زیر انتخاب مناسبی است:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
در این کد دو مقدار اصلی وجود دارد که بهتر است مفهوم آنها را بدانید:
width=device-width
این بخش به مرورگر می‌گوید عرض Viewport را با عرض دستگاه هماهنگ کند.
به عنوان مثال، اگر کاربر صفحه را روی یک گوشی با عرض CSS برابر ۳۹۰ پیکسل باز کند، مرورگر می‌تواند Viewport را بر اساس همین عرض در نظر بگیرد، نه اینکه صفحه را مانند یک نمایشگر دسکتاپ بسیار عریض پردازش کند.
مقدار device-width برای طراحی صفحات واکنش‌گرا اهمیت زیادی دارد. مستندات MDN نیز استفاده از width=device-width را برای هماهنگ کردن Viewport با عرض دستگاه توصیه می‌کنند.
initial-scale=1.0
این مقدار مقیاس اولیه صفحه هنگام بارگذاری را مشخص می‌کند.
مقدار 1.0 یعنی صفحه در مقیاس اولیه ۱۰۰ درصد نمایش داده شود. در نتیجه، ترکیب زیر:
width=device-width, initial-scale=1.0
به مرورگر اعلام می‌کند که عرض صفحه را با عرض دستگاه هماهنگ کرده و صفحه را در مقیاس اولیه استاندارد نمایش دهد.
آیا initial-scale=1.0 ضروری است؟
در مرورگرهای مدرن، width=device-width بخش اصلی تنظیم Viewport است و رفتار مرورگرها نسبت به گذشته تغییر کرده است. طبق مستندات فعلی MDN، initial-scale=1.0 برای مرورگرهای جدید الزام سابق را ندارد، اما همچنان در کدهای رایج Viewport استفاده می‌شود و در برخی سناریوهای مربوط به مقیاس اولیه می‌تواند مفید باشد.
بنابراین اگر در کد سایت خود این عبارت را مشاهده کردید، وجود آن به خودی خود مشکلی ایجاد نمی‌کند:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
اگر متا تگ Viewport وجود نداشته باشد چه اتفاقی می‌افتد؟
این یکی از مهم‌ترین سؤال‌ها درباره متا تگ Viewport است.
در برخی مرورگرهای موبایل، اگر Viewport به درستی تعریف نشده باشد، مرورگر ممکن است صفحه را با یک عرض مجازی بسیار بزرگ‌تر از عرض واقعی نمایشگر در نظر بگیرد و سپس محتوا را کوچک کند تا در صفحه جا شود. MDN توضیح می‌دهد که در چنین شرایطی بعضی مرورگرهای موبایل ممکن است از یک عرض اولیه حدود ۹۸۰ پیکسل استفاده کنند.
در نتیجه ممکن است کاربر با مشکلاتی مانند این موارد مواجه شود:
متن صفحه بسیار کوچک دیده می‌شود، عناصر رابط کاربری اندازه مناسبی ندارند و کاربر برای خواندن محتوا مجبور به بزرگ‌نمایی یا جابه‌جایی صفحه می‌شود.
برای مثال، فرض کنید صفحه‌ای درباره دستور پخت یک غذا دارید. کاربر با موبایل وارد صفحه شده اما به دلیل تنظیم نادرست Viewport، دستور پخت مانند نسخه دسکتاپ در یک عرض بزرگ رندر شده و سپس کوچک شده است. کاربر برای خواندن مواد اولیه باید مرتب صفحه را Zoom کند. این مشکل ارتباطی با کیفیت محتوای دستور غذا ندارد؛ مشکل از نحوه نمایش صفحه در دستگاه است.
آیا متا تگ Viewport باعث Responsive شدن سایت می‌شود؟
خیر.
این یکی از اشتباهات رایج در مورد Viewport است.
متا تگ Viewport به مرورگر می‌گوید صفحه را با چه عرض و مقیاسی در نظر بگیرد، اما خودش باعث نمی‌شود عناصر صفحه به صورت خودکار برای موبایل تغییر اندازه دهند.
برای Responsive شدن واقعی یک صفحه، معمولاً مجموعه‌ای از تکنیک‌ها مورد استفاده قرار می‌گیرد؛ از جمله:
- طراحی انعطاف‌پذیر صفحات
- CSS Media Query
- اندازه‌های نسبی برای عناصر
- تصاویر و ویدئوهای سازگار با عرض صفحه
- تنظیم مناسب فونت‌ها
- تغییر چیدمان عناصر در نمایشگرهای مختلف
به همین دلیل ممکن است سایتی متا تگ Viewport صحیح داشته باشد اما همچنان در موبایل مشکل داشته باشد. برای نمونه، اگر یک تصویر عرض ثابت ۲۰۰۰ پیکسل داشته باشد، وجود Viewport به تنهایی نمی‌تواند جلوی ایجاد مشکل را بگیرد.
تفاوت Viewport با Screen چیست؟
این دو مفهوم شبیه به هم هستند اما دقیقاً یک چیز نیستند.
Screen به صفحه‌نمایش دستگاه اشاره دارد، در حالی که Viewport محدوده‌ای از صفحه مرورگر است که برای نمایش محتوای وب در اختیار صفحه قرار دارد.
برای مثال، ممکن است یک گوشی نمایشگر بسیار باکیفیتی داشته باشد و تعداد زیادی پیکسل فیزیکی داشته باشد، اما این موضوع به معنی آن نیست که صفحه وب نیز دقیقاً با همان تعداد پیکسل فیزیکی محاسبه می‌شود.
مرورگرها از مفهوم CSS Pixel استفاده می‌کنند تا نمایش صفحات وب را در دستگاه‌هایی با تراکم پیکسلی متفاوت مدیریت کنند. به همین دلیل، در طراحی وب نباید مفهوم پیکسل فیزیکی نمایشگر را با عرض Viewport یکی دانست.
آیا باید از user-scalable=no استفاده کنیم؟
گاهی در کدهای قدیمی Viewport چنین عبارتی را می‌بینید:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
قسمت user-scalable=no امکان بزرگ‌نمایی صفحه توسط کاربر را محدود می‌کند.
استفاده از این مقدار معمولاً توصیه نمی‌شود، زیرا محدود کردن قابلیت Zoom می‌تواند برای کاربرانی که برای خواندن محتوا به بزرگ‌نمایی نیاز دارند مشکل ایجاد کند. مستندات MDN نیز توصیه می‌کنند قابلیت بزرگ‌نمایی کاربر بدون دلیل محدود نشود.
در بیشتر صفحات وب، همان کد ساده زیر کافی است:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
نیازی نیست بدون دلیل مقادیر maximum-scale، minimum-scale یا user-scalable را به آن اضافه کنید.
پیشنهاد مطالعه : تگ noindex چیست؟
متا تگ Viewport در وردپرس کجا قرار می‌گیرد؟
اگر سایت شما با وردپرس ساخته شده باشد، معمولاً لازم نیست خودتان این تگ را در تک‌تک صفحات قرار دهید. بسیاری از قالب‌های استاندارد وردپرس این تنظیم را به صورت خودکار در بخش <head> صفحات قرار می‌دهند.
اگر می‌خواهید وجود آن را بررسی کنید، می‌توانید یکی از صفحات سایت را در مرورگر باز کرده و با گزینه View Page Source یا ابزارهای توسعه‌دهنده مرورگر، بخش <head> را بررسی کنید.
به دنبال عبارتی مشابه این باشید:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
اگر از یک قالب وردپرسی استفاده می‌کنید که Viewport را به صورت خودکار اضافه می‌کند، بهتر است بدون اطلاع از ساختار قالب، یک نسخه دیگر از این تگ را به سایت اضافه نکنید؛ زیرا وجود تنظیمات تکراری یا ناسازگار می‌تواند بررسی و عیب‌یابی را دشوارتر کند.
چگونه بفهمیم Viewport سایت درست تنظیم شده است؟
صرفاً وجود متا تگ Viewport کافی نیست؛ باید نتیجه آن را نیز در موبایل بررسی کنید.
یک بررسی ساده می‌تواند شامل این مراحل باشد:
۱. صفحه را با گوشی واقعی باز کنید.
بررسی کنید متن‌ها بدون نیاز به Zoom خوانا هستند و کاربر برای دیدن محتوای اصلی مجبور به اسکرول افقی نیست.
۲. اندازه مرورگر را تغییر دهید.
در کامپیوتر می‌توانید Developer Tools مرورگر را باز کرده و حالت نمایش موبایل را فعال کنید. سپس اندازه‌های مختلف را امتحان کنید.
۳. عناصر بزرگ را بررسی کنید.
تصاویر، جدول‌ها، ویدئوها یا سایر عناصر ثابت نباید از عرض صفحه خارج شوند.
۴. تعامل با صفحه را امتحان کنید.
دکمه‌ها، فرم‌ها، منوها و سایر عناصر باید در صفحه کوچک قابل استفاده باشند.
۵. سورس HTML را بررسی کنید.
وجود کد استاندارد Viewport را در بخش <head> بررسی کنید.
اگر با وجود Viewport صحیح، صفحه همچنان در موبایل به‌هم‌ریخته است، احتمالاً مشکل از CSS، عرض ثابت عناصر، تصاویر، جدول‌ها یا ساختار Responsive صفحه است، نه خود متا تگ Viewport.
پیشنهاد مطالعه : متا دیسکریپشن (Meta Description) چیست؟
خطاهای رایج در استفاده از متا تگ Viewport
یکی از اشتباهات رایج، استفاده از مقدارهای غیرضروری و محدودکننده در این تگ است. برای مثال:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
این کد قابلیت بزرگ‌نمایی کاربر را محدود می‌کند و در بسیاری از سایت‌ها دلیلی برای استفاده از آن وجود ندارد.
اشتباه دیگر، تعریف یک عرض ثابت بدون نیاز واقعی است:
<meta name="viewport" content="width=500">
در بیشتر صفحات Responsive، هدف این است که Viewport با عرض دستگاه هماهنگ شود؛ بنابراین استفاده از device-width انتخاب معمول‌تری است.
همچنین نباید تصور کرد که با اضافه کردن Viewport تمام مشکلات نسخه موبایل سایت برطرف می‌شود. اگر یک جدول بزرگ، تصویر با عرض ثابت یا یک عنصر CSS از عرض صفحه خارج شود، همچنان ممکن است اسکرول افقی ایجاد شود.
آیا متا تگ Viewport روی سئو تأثیر دارد؟
متا تگ Viewport را بهتر است مستقیماً به عنوان یک فاکتور رتبه‌بندی مستقل در نظر نگیریم. اهمیت اصلی آن در فراهم کردن شرایط مناسب برای نمایش و استفاده از صفحات در دستگاه‌های مختلف است.
اگر یک سایت در موبایل به شکل نامناسبی نمایش داده شود، مشکلاتی مانند کوچک بودن متن، نیاز به Zoom، اسکرول افقی و دشوار شدن تعامل با عناصر صفحه می‌تواند تجربه کاربر را تحت تأثیر قرار دهد. Viewport یکی از اجزای فنی مورد نیاز برای پیاده‌سازی صحیح تجربه موبایل و طراحی واکنش‌گرا است.
بنابراین بهتر است به جای نگاه کردن به Viewport به عنوان یک تکنیک مستقل برای بهبود رتبه، آن را بخشی از بهینه‌سازی فنی و تجربه کاربری در موبایل بدانیم.
بهترین کد برای متا تگ Viewport چیست؟
برای یک وب‌سایت معمولی و Responsive، می‌توانید از کد زیر استفاده کنید:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
در اغلب پروژه‌ها نیازی به پیچیده‌تر کردن این کد نیست. اگر پروژه نیاز خاصی دارد، باید مقدارهای دیگر Viewport بر اساس همان نیاز بررسی شوند و نباید صرفاً به دلیل وجود نمونه‌های مختلف در اینترنت به کد اضافه شوند.
جمع‌بندی
متا تگ Viewport به مرورگر می‌گوید صفحه وب را از نظر عرض و مقیاس اولیه چگونه در دستگاه کاربر نمایش دهد. مهم‌ترین کاربرد آن در موبایل است؛ جایی که تفاوت زیادی میان عرض نمایشگر گوشی و محیطی که یک صفحه وب برای نمایش نیاز دارد وجود دارد.
کد رایج آن:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
با تنظیم width=device-width، عرض Viewport با عرض دستگاه هماهنگ می‌شود و initial-scale=1.0 نیز مقیاس اولیه صفحه را مشخص می‌کند.
در عین حال، باید به خاطر داشته باشید که Viewport به تنهایی سایت را Responsive نمی‌کند. برای ایجاد یک تجربه مناسب در موبایل، ساختار HTML، CSS، Media Queryها، تصاویر، فونت‌ها و سایر عناصر صفحه نیز باید به درستی برای نمایشگرهای مختلف طراحی و پیاده‌سازی شوند.
سوالات متداول
متا تگ Viewport چیست؟
متا تگ Viewport یک تگ HTML است که نحوه تعیین عرض و مقیاس اولیه صفحه در مرورگر، به‌خصوص مرورگرهای موبایل، را مشخص می‌کند.
کد استاندارد Viewport چیست؟
در بیشتر صفحات Responsive از این کد استفاده می‌شود:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
آیا Viewport سایت را Responsive می‌کند؟
خیر. Viewport یکی از پیش‌نیازهای مهم نمایش صحیح صفحات Responsive در موبایل است، اما برای Responsive شدن کامل، CSS و ساختار صفحه نیز باید متناسب با اندازه‌های مختلف نمایشگر طراحی شوند.
اگر Viewport در سایت نباشد چه می‌شود؟
در برخی مرورگرهای موبایل ممکن است صفحه با یک عرض مجازی بزرگ‌تر، مانند حدود ۹۸۰ پیکسل، پردازش و سپس کوچک شود. در نتیجه متن و عناصر صفحه می‌توانند بسیار کوچک به نظر برسند و کاربر برای مشاهده محتوا به Zoom یا جابه‌جایی افقی نیاز پیدا کند.
آیا باید از user-scalable=no استفاده کنیم؟
در حالت معمول خیر. محدود کردن قابلیت بزرگ‌نمایی می‌تواند دسترسی‌پذیری صفحه را برای برخی کاربران کاهش دهد و معمولاً دلیل مناسبی برای استفاده از آن وجود ندارد.
آیا متا تگ Viewport برای همه صفحات سایت لازم است؟
اگر سایت برای نمایش در دستگاه‌های مختلف طراحی شده باشد، تنظیم صحیح Viewport در صفحات آن اهمیت دارد. در سایت‌های وردپرسی نیز معمولاً قالب این تگ را به صورت خودکار اضافه می‌کند و نیازی به درج دستی آن در هر صفحه نیست.
