آموزش های سئو

مفهوم viewport چیست چرا از تگ viewport در طراحی استفاده می‌شود؟

مفهوم viewport چیست چرا از تگ viewport در طراحی استفاده می‌شود؟

واژه “viewport” به معنای اندازه پنجره یا ناحیه قابل مشاهده روی یک صفحه نمایش است. به طور کلی این اصطلاح برای نمایشگرهای دستگاه‌های همراه مانند تلفن‌های هوشمند و تبلت‌ها استفاده می‌شود.

اصطلاح viewport به یک اِلمان متا در HTML 5 اشاره دارد که نقش مهمی در بهینه‌سازی و نمایش محتوا در موبایل دارد. این عنصر محتوای نمایش داده شده را مقیاس‌بندی می‌کند تا اندازه صفحه نمایش به طور بهینه شده و مناسب استفاده شود. در این حالت عنصر متا viewport تنظیم می‌کند که تمام محتوا به طور یکسان خوانا و صحیح و کامل بر روی صفحه نمایش‌های با اندازه‌های مختلف نمایش داده شود. عنصر viewport صفحات وب را با طول و عرض صفحه نمایش تطبیق می‌دهد تا مرورگرهای موبایل بتوانند تمام محتوا را به درستی نمایش دهند.

اطلاعات کلی درباره viewport

مفهوم viewport چیست چرا از تگ viewport در طراحی استفاده می‌شود؟

به لطف viewport وب‌سایت‌ها در دستگاه‌های همراه به همان شیوه‌ای که در صفحه نمایش دسکتاپ نمایش داده می‌شوند نمایش داده نمی‌شوند. کاربران نیازی به بزرگنمایی ندارند و می‌توانند محتوای یک صفحه را به گونه‌ای مشاهده کنند که با نمایشگر کوچک مطابقت داشته باشد. Viewportها به عنوان عناصر متا (در ترکیب با طراحی وب واکنش‌گرا) به مرورگرهای وب کمک می‌کنند تا صفحات را تقسیم کرده و آن‌ها را در صفحه نمایش‌های کوچک به گونه‌ای دوباره مونتاژ کنند که کاربران بتوانند یک تصویر معنادار و خوانا را دریافت کنند. بنابراین viewportها وظیفه دارند با تعیین فرمت‌های خروجی متناسب با هر دستگاه همراه از مشکلات نمایش جلوگیری کنند.

عملکرد viewport در کد های html و css چطور است؟

می‌توان viewportها را به دو روش مختلف در فایل‌های HTML خود ادغام کرد

  • روش اول : به صورت مستقیم در فایل html
  • روش دوم : در یک فایل css به صورت کاملا جداگانه

اگر می‌خواهید viewport را به عنوان یک تگ متا مستقیماً در فایل HTML خود قرار دهید، می‌توانید از کد زیر استفاده کنید:

در این حالت عرض به گونه‌ای تعریف می‌شود که با عرض صفحه دستگاه مربوطه تطبیق پیدا کند (width=device-width). Initial-scale نشان‌دهنده عامل بزرگنمایی اولیه است و نشان می‌دهد که صفحه شما باید به صورت 1:1 روی صفحه یک دستگاه همراه نمایش داده شود.

پارامتر های viewport

width

این پارامتر مهم‌ترین پارامتر متا تگ viewport محسوب می‌شود و تعیین می‌کند عرض وب‌سایت چقدر است. با مقدار width=device-width عرض وب‌سایت را برابر با عرض صفحه نمایش دستگاه در نظر گرفته می شود. همچنین می‌توان یک عدد مشخص مانند width=500px برای مشخص کردن عرض صفحه وارد کرد.

height

این پارامتر طول وب‌سایت را مشخص می‌کند مانند پارامتر قبلی می‌توان با مقدار width=device-height طول وب‌سایت را به اندازه طول صفحه نمایش کاربر در نظر گرفت که توصیه نمی‌شود عدد مشخصی برای آن وارد کنید.

initial-scale

این پارامتر اندازه زوم (بزرگنمایی) اولیه صفحه را موقع اولین بارگذاری مشخص می‌کند. initial-scale=1 از زوم پیش فرض مرورگرها جلوگیری می‌کند.

minimum-scale

این پارامتر بیشترین مقدار زومی که کاربر می‌تواند در سایت انجام دهد مشخص می‌کند. به عنوان مثال اگر از maximum-scale=1 استفاده شود یعنی کاربر نمی‌تواند در سایت هیچ زومی انجام دهد. از آنجایی که در بسیاری از مواقع در صفحات کوچک موبایل‌ها کاربرها نیاز به زوم دارند بهتر است این پارامتر تنظیم نشود.

maximum-scale

این پارامتر برعکس پارامتر قبلی است و تعیین می‌کند که کاربر تا چه اندازه امکان کوچک نمایی (zoom out) دارد.

user-scalable

این پارامتر امکان زوم توسط کاربر را تعیین می‌کند و دو مقدار Yes و No را می‌پذیرد. اگر از User-scalable=No استفاده کنید به این معنی است که کاربر هیچ زومی نتواند انجام دهد که توصیه می‌شود این کار را نکنید. بهتر است از User-scalable=Yes استفاده کنید یا به‌طورکلی از این پارامتر استفاده نکنید تا کاربر امکان زوم در سایت شما را داشته باشد.

interactive-widget

این پارامتر به تاثیر ویجت‌های تعاملی مانند کیبوردهای مجازی روی صفحه می‌پردازد. مقادیری که این پارامتر دریافت می‌کند شامل resizes-visual ، resizes-content و overlays-content است.

تگ viewport یک متا تگ است که در بخش تگ head سایت قرار می‌گیرد و اگر viewport اشتباه وارد شود باعث می‌شود که کاربر برای مشاهده صفحه مجبور به اسکرول عرضی شود

همچنین می‌توانید از viewport برای تعریف ارتفاع و تنظیم یک عامل بزرگنمایی حداقل و/یا حداکثر استفاده کنید. علاوه بر این تگ متا می‌تواند از بزرگنمایی کاربران (user-scalable=no) جلوگیری کند.

اگر viewport را به جای استفاده مستقیم در سند html در یک فایل CSS تنظیم کنید باید آن را درست در ابتدای فایل قرار دهید تا نمایش صحیح را تضمین کنید در اینجا یک مثال از نحوه ظاهر شدن آن کد آورده شده است:

واحد ها و معنی آنها

vh مخفف viewport height است. این واحد بر اساس ارتفاع viewport است. مقدار 1vh برابر با 1% ارتفاع viewport است. مقدار 100vh برابر با 100% ارتفاع viewport است.

vw مخفف viewport width است. این واحد بر اساس عرض viewport است. مقدار 1vw برابر با 1% عرض viewport است.

vmin مخفف viewport minimum است. این واحد بر اساس کوچک‌ترین بعد viewport است. اگر ارتفاع viewport کوچکتر از عرض باشد، مقدار 1vmin برابر با 1% ارتفاع viewport خواهد بود. به طور مشابه اگر عرض viewport کوچکتر از ارتفاع باشد، مقدار 1vmin برابر با 1% عرض viewport خواهد بود.

vmax مخفف viewport maximum است. این واحد بر اساس بزرگ‌ترین بعد viewport است. اگر ارتفاع viewport بزرگتر از عرض باشد، مقدار 1vmax برابر با 1% ارتفاع viewport خواهد بود. به طور مشابه اگر عرض viewport بزرگتر از ارتفاع باشد مقدار 1vmax برابر با 1% عرض viewport خواهد بود.

خطا های احتمالی

مشکل اصلی با viewportها این است که تعداد دستگاه‌های همراه با ابعاد مختلف در حال افزایش است این یعنی شما تلفن ها و یا به صورت کلی اسکرین هایی با سایز های مختلف را در بازار مشاهده می کنید. با این حال برای دستیابی به یک نمایش بهینه در تمام دستگاه‌های موجود، ابزارها و نرم‌افزارهای مختلفی برای بررسی نمایش صحیح در دستگاه‌های همراه استاندارد وجود دارد. این ابزارها به عنوان مثال iOS MIH-Tool، Ghostlab و Adobe Edge Inspect هستند. اما بهترین ابزار شاید حالت Mobile View مرورگر کامپیوتر است که می توانید از آن برای مشاهده سند خود در سایز ها و حالت های مختلف استفاده کنید.

سوالات پرتکرار در خصوص مفهوم Viewport

به صورت خلاصه viewport را تعریف کن

به طور خلاصه، اگر بخواهیم این مفهوم را تضویح دهیم این است که viewport یک متا تگ است که در بخش تگ head سایت قرار می‌گیرد و اگر viewport اشتباه وارد شود باعث می‌شود که کاربر برای مشاهده صفحه مجبور به اسکرول عرضی شود که باعث کاهش تجربه کاربری سایت و تاثیر منفی روی سئو سایت خواهد شد.

عبارت viewport مخفف چیست؟

عبارت viewport مخفف ناحیه قابل مشاهده روی صفحه نمایش کاربر است و اغلب هنگام صحبت در مورد دستگاه های تلفن همراه استفاده می شود.

Viewport در HTML5 چیست؟

Viewport یک عنصر متا در HTML 5 است که برای مقیاس بندی محتوا بر اساس دستگاه کاربر استفاده می شود، این عنصر برای طراحی وب سایت ریسپانسیو مهم است.

آیا داشتن ویو پورت برای سایت ها لازم است؟

بله، ویوپورت نقش بسیار مهمی در واکنشگرایی سایت ها دارد و در طراحی سایت نقش موثری و کارامدی دارد.

آیدین حسینی

آیدین فارغ التحصیل رشته علوم کامپیوتر است، او همچنین سالهاست که در زمینه سئو و دیجیتال مارکتینگ فعالیت می‌کند و به کسب اطلاعات در ابعادی وسیع تر پرداخته و توانسته در حوزه هایی چون DevOps گام بردارد. او به هر کاری که انجام می‌دهد علاقه مند و عاشق سفر است و هر زمان که از برنامه کاری شلوغ خود خارج می‌شود به طبیعت رفته و از آن لذت می برد.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا