در این پست قضد داریم راجب تگ viewport و متا تگ viewport در سئو توضیح دهیم امید وارم تا انتها با ما همراه باشید
متا تگ viewport در سئو
زمانی که نخستین مرورگرهای موبایل به شکل امروزی متداول شدند،
مشکلی در نمایش سایت‌های اینترنتی وجود داشت. بیشتر سایت‌های اینترنتی با فرض اینکه صفحه‌ی نمایشگر کاربران دارای عرضی حداقل ۱۰۰۰ پیکسل یا بیشتر است، طراحی شده بودند
و اگر در نمایشگرهایی کم‌عرض‌تر قرار می‌گرفتند، بخشی از محتوای سایت قابل استفاده نبود.
برای حل این مشکل، مرورگرهای موبایل به جای استفاده از فضای محدود گوشی، سایت را در فضایی مجازی به نام Viewport که عرضی ۱۰۰۰ پیکسلی دارد
، رندر می‌کنند و سپس این فضای مجازی ۱۰۰۰ پیکسلی را با بزرگنمایی و کوچک‌نمایی یا قابلیت جابجا کردن به چپ و راست، برای کاربران قابل استفاده کردند.
همچنین امکانی برای سایت‌های جدید فراهم کردند که به طور صریح، پشتیبانی از عرض‌های کمتر از ۱۰۰۰ پیکسل را به مرورگر اعلام کنند.
بیشتر بدانید:
تعیین عرض Viewport در طراحی سایت واکنش‌گرا
سایت‌های جدید، با تعریف متاتگ Viewport به شکل زیر می‌توانند به مرورگر اعلام کنند که سایت به صورت خودکار بر اساس عرض صفحه تغییر شکل می‌دهد
و مرورگر لازم نیست تا سایت را در فضای ۱۰۰۰ پیکسلی رندر کند.
|
1
|
<meta name=“viewport” content=“width=device-width”>
|
کد بالا می‌بایست در بخش head قرار گیرد. علاوه بر تنظیم فوق، تنظیمات زیر نیز می‌توانند در Viewport مورد استفاده قرار گیرند:
- user-scalable : تعیین امکان بزرگنمایی یا کوچک‌نمایی توسط کاربر با مقدارهای yes یا no
- initial-scale : مقدار بزرگنمایی پیش‌فرض با مقدار عدد ۱ به عنوان اندازه‌ی معمولی
- maximum-scale : حداکثر بزرگنمایی قابل تنظیم توسط کاربر با مقدار عددی
- minimum-scale : حداقل میزان کوچک‌نمایی قابل تنظیم توسط کاربر با مقدار عددی
برای مثال کد زیر تمامی تنظیمات فوق را در خود جای داده است:
|
1
|
<meta name=“viewport” content=“width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0”>
|
تعیین اندازه‌ی Viewport به صورت عددی
علاوه بر اینکه می‌توانید مقدار اندازه‌ی Viewport را متغیر در نظر بگیرید، با وارد کردن مقدار عددی به جای device-width می‌توانید مقدار پیش‌فرض ۱۰۰۰ پیکسل را نیز تغییر دهید
|
1
|
<meta name=“viewport” content=“width=1500, initial-scale=1”>
|
قطعه کد بالا اندازه‌ی Viewport را ۱۵۰۰ پیکسل تعیین می‌کند و اندازه‌ی پیش‌فرض بزرگنمایی را مساوی ۱ قرار می‌دهد.
در نتیجه سایت در موبایل به صورت ریز قابل مشاهده خواهد بود و کاربران می‌بایست با بزرگنمایی محتوای موجود را مشاهده نمایند.
آشنایی با پارامترهای متا تگ viewport:
width
این پارامتر در واقع مهمترین قسمت متا تگ viewport می باشد. به مرورگر می گوید که عرض وب سایت چقدر است.
width=device-width عرض وب سایت را برابر با عرض گوشی موبایل در نظر می گیرد. همچنین می توانید یک عدد بر حسب پیکسل width=320 برای مشخص کردن عرض صفحه بکار ببرید.
Initial-scale
این پارامتر میزان زوم اولیه را مشخص می کند و استفاده از initial-scale=1 باعث جلوگیری از زوم پیش فرض مرورگرها می شود.
Maximum-scale
این پارامتر بیشترین مقدار زوم را مشخص می کند
و اگر از maximum-scale=1 استفاده شود باعث می شود کاربران نتوانند بر روی عناصر وب سایت زوم کنند زیرا حداکثر مقدار زوم تنظیم شده است. اما به دلیل اینکه در موارد زیادی از قبیل بررسی تصاویر موجود در صفحه نیاز است
که کاربران زوم کنند بهتر است این پارامتر تنظیم نشود.
User-scalable
دو مقدار yes و no دریافت می کند.
User-scalable=no بطور کل قابلیت زوم را غیر فعال می کند که بسیار بدتر از maximum-scale=1 می باشد.
بهتر است استفاده از قابلیت زوم را به عهده کاربر گذاشت. اگر از این پارامتر استفاده نکنید یا به آن مقدار yes تخصیص دهید به معنی فعال بودن قابلیت زوم خواهد بود.
معرفی توسط اپل و اختلاف شرکتها
همانطور که گفته شد این تگ توسط اپل معرفی شد ولی مایکروسافت از نسخه 10 مرورگر خود تصمیم گرفت این متا تگ را پشتیبانی نکند
و بجای آن از استاندارد W3C استفاده کند.
برای رعایت استانداردهای طراحی وب، در کنار استفاده از متا تگ این دستورات را نیز به فایل CSS خود اضافه کنید تا در میان جنگ غولها گرفتار نشوید:
@viewport{
zoom: 1.0;
width: device-width;
}
ممنون که با مهراکت همراه بودین
