آشنایی با متا تگ viewport و تنظیمات آن
آشنایی با متا تگ viewport و تنظیمات آن » در این مقاله، به معرفی متاتگ viewport و دلیل استفاده از viewport در صفحات وب و نحوه تنظیمات آن خواهیم پرداخت.

آشنایی با متا تگ viewport و تنظیمات آن

 Configure the Viewport Meta Tag

معرفی و تنظیمات متا تگ ویوپورت (Viewport)

 

متاتگ Viewport : معرفی و تنظیمات ویوپورت

 

متا تگ viewport چیست؟

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

 

متا تگ viewport چیست؟

 

چگونگی تعریف و تنظیم متا تگ Viewport:

با درج یک تکه کد ساده html در بخش head صفحات یک وب سایت، می توان Viewport را تعریف کرد. پیشنهاد گوگل تعریف متا تگ viewport بصورت زیر است:

<meta name=viewport content="width=device-width, initial-scale=1">

متاتگ viewport که در خط بالا آمده است بیان کننده دو مورد است:

  • Width=device-width
  • Initial-scale=1

 

موارد فوق به بیان ساده بدین صورت تعریف می شوند:

  • Width: عرض صفحه وب را به اندازه اسکرین یا پنجره نمایش دهنده وب سایت در می آورد.
  • Initial scale: اگر وب سایت در اسکرین های landscape (مانند چرخاندن موبایل) به نمایش درآمد، عرض صفحه وب را به اندازه عرض اسکرین تغییر دهد.

 

 

نحوه چک کردن Viewport وب سایت:

به منظور چک کردن صفحات وب سایت خود از لحاظ Viewport (تعریف و یا تنظیم صحیح متا تگ viewport)، می توانید از ابزار سئوی موبایل (mobile seo tools) استفاده نمائید.

 

صفحه وب بدون متاتگ Viewport:

 

صفحه وب بدون متاتگ Viewport

 

در تصویر فوق، متاتگ viewport تعریف نشده است. در اینصورت، وب سایت در نمایشگرهای بزرگ مانند دسکتاپ، بدرستی نمایش می یابد اما در دستگاه های کوچک مانند موبایل، کاربران باید روی صفحه زوم کنند تا قادر باشند مطالب آن را مطالعه کنند.

 

صفحه وب با متاتگ Viewport:

 

صفحه وب با متاتگ Viewport

 

وقتی ما متاتگ viewport را در صفحات وب سایت خود تعریف می کنیم، باعث می شود عرض این صفحات در تمام دستگاه ها، هم اندازه با عرض دستگاه شود. در اینصورت، تمام المان های صفحه وب (مانند تصویر و متن) برای کاربر خوانا خواهد بود و نیازی نیست که کاربر زوم کند.

 

در دسترس بودن (Accessibility):

از "minimum-scale" و "maximum-scale" و یا "user-scalable" در متا تگ viewport استفاده نکنید. زیرا ممکن است باعث تجربه کاربری ناخوشایند برای کاربران وب سایت تان شود.

 

منبع: https://varvy.com/mobile/configure-viewport.html


برچسب‌ها:

تعریف viewportتگ viewportتنظیم viewportتنظیم ویوپورتطراحی ریسپانسیومتا تگ ویوپورتمتاتگ Viewportویوپورت

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

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

12 − 5 =