آشنایی با متا تگ 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

0/5 ( 0 نظر )

این مقاله را در شبکه‌های اجتماعی به اشتراک بگذارید!

Share on facebook
Share on google
Share on linkedin
Share on telegram
Share on email

نظرات

  1. عالی بود

    1. سلام. ممنون آقا سعید 🙂

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

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

دانلود کتاب گوگل سرچ کنسول

آموزش گوگل سرچ کنسول - نسخه جدید

مقالات اخیر

مقالات تصادفی

فهرست کلی مقالات

کتاب گوگل ادز

دانلود کتاب « آموزش سرویس گوگل ادوردز »

آموزش کامل فعال‌سازی HTTPS در وردپرس

دانلود کتاب "فعال‌سازی HTTPS در وردپرس"

دانلود رایگان کتاب الکترونیکی

معرفی بهترین ابزارهای بازاریابی محتوا در سال 2019

دانلود رایگان کتاب الکترونیکی "معرفی بهترین ابزارهای بازاریابی محتوا در سال 2019"