آشنایی با متاتگ viewport برای طراحی سایت ریسپانسیو

زمانی که نخستین مرورگرهای موبایل به شکل امروزی متداول شدند، مشکلی در نمایش سایت‌های اینترنتی وجود داشت. بیشتر سایت‌های اینترنتی با فرض اینکه صفحه‌ی نمایشگر کاربران دارای عرضی حداقل ۱۰۰۰ پیکسل یا بیشتر است، طراحی شده بودند و اگر در نمایشگرهایی کم‌عرض‌تر قرار می‌گرفتند، بخشی از محتوای سایت قابل استفاده نبود.

برای حل این مشکل، مرورگرهای موبایل به جای استفاده از فضای محدود گوشی، سایت را در فضایی مجازی به نام Viewport که عرضی ۱۰۰۰ پیکسلی دارد، رندر می‌کنند و سپس این فضای مجازی ۱۰۰۰ پیکسلی را با بزرگنمایی و کوچک‌نمایی یا قابلیت جابجا کردن به چپ و راست، برای کاربران قابل استفاده کردند.

همچنین امکانی برای سایت‌های جدید فراهم کردند که به طور صریح، پشتیبانی از عرض‌های کمتر از ۱۰۰۰ پیکسل را به مرورگر اعلام کنند.

تعیین عرض Viewport در طراحی سایت واکنش‌گرا

سایت‌های جدید، با تعریف متاتگ Viewport به شکل زیر می‌توانند به مرورگر اعلام کنند که سایت به صورت خودکار بر اساس عرض صفحه تغییر شکل می‌دهد و مرورگر لازم نیست تا سایت را در فضای ۱۰۰۰ پیکسلی رندر کند.

کد بالا می‌بایست در بخش head قرار گیرد. علاوه بر تنظیم فوق، تنظیمات زیر نیز می‌توانند در Viewport مورد استفاده قرار گیرند:

• user-scalable : تعیین امکان بزرگنمایی یا کوچک‌نمایی توسط کاربر با مقدارهای yes یا no
  
• initial-scale : مقدار بزرگنمایی پیش‌فرض با مقدار عدد ۱ به عنوان اندازه‌ی معمولی
  
• maximum-scale : حداکثر بزرگنمایی قابل تنظیم توسط کاربر با مقدار عددی
  
• minimum-scale : حداقل میزان کوچک‌نمایی قابل تنظیم توسط کاربر با مقدار عددی
  

برای مثال کد زیر تمامی تنظیمات فوق را در خود جای داده است:

تعیین اندازه‌ی Viewport به صورت عددی

علاوه بر اینکه می‌توانید مقدار اندازه‌ی Viewport را متغیر در نظر بگیرید، با وارد کردن مقدار عددی به جای device-width می‌توانید مقدار پیش‌فرض ۱۰۰۰ پیکسل را نیز تغییر دهید

قطعه کد بالا اندازه‌ی Viewport را ۱۵۰۰ پیکسل تعیین می‌کند و اندازه‌ی پیش‌فرض بزرگنمایی را مساوی ۱ قرار می‌دهد. در نتیجه سایت در موبایل به صورت ریز قابل مشاهده خواهد بود و کاربران می‌بایست با بزرگنمایی محتوای موجود را مشاهده نمایند.

ادامه‌ی طراحی سایت ریسپانسیو یا واکنش‌گرا

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

برای مثال منوهای سایت ممکن است اگر عرض صفحه کمتر از ۵۰۰ پیکسل باشد، از حالت افقی به حالت عمودی تغییر شکل دهند یا به صورت مخفی درآیند.

طراحی سایت واکنش‌گرا و سئو

استفاده از موبایل برای مرور اینترنت روز به روز در حال افزایش است. بنابراین سایت‌هایی که برای موبایل آماده نباشند، از نظر کاربران و موتورهای جستجو، سایت‌هایی با کیفیت پایین در نظر گرفته می‌شوند. طراحی سایت ریسپانسیو سبب می‌شود یک نمره‌ی مثبت برای سئو سایت شما در نظر گرفته شود.