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

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

طراحی سایت واکنش گرا - Responsive

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

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

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

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

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

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

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

برای اینکه کاربرانی با محدودیت‌های جسمی یا کاربرانی که گوشی‌های موبایل با صفحات کوچک دارند، همیشه بهتر است از غیرفعال کردن user-scalable خودداری نمایید.

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

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

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

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

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

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

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

ابعاد Viewport و وضوح نمایشگر برخی موبایل‌ها و تبلت‌ها

نوع موبایل یا تبلت اندازه Viewport وضوح نمایشگر دستگاه
آیفون 12 390 × 844 1170 × 2532
آیفون 12 Mini 360 × 780 1080 × 2340
آیفون 12 Pro 390 × 844 1170 × 2532
آیفون 12 Pro Max 428 × 926 1248 × 2778
آیفون SE 214 × 379 640 × 1136
آیفون 11 Pro Max 414 × 896 1242 × 2688
آیفون 11 Xs Max 414 × 896 1242 × 2688
آیفون 11 414 × 896 828 × 1792
آیفون 11 Xr 414 × 896 828 × 1792
آیفون 11 Pro 375 × 812 1125 × 2436
آیفون 11 X 375 × 812 1125 × 2436
آیفون 11 Xs 375 × 812 1125 × 2436
آیفون X 375 × 812 1125 × 2436
آیفون 8 Plus 414 × 736 1080 × 1920
آیفون 8 375 × 667 750 × 1334
آیفون 7 Plus 414 × 736 1080 × 1920
آیفون 7 375 × 667 750 × 1334
آیفون 6s Plus 414 × 736 1080 × 1920
آیفون 6s 375 × 667 750 × 1334
آیفون 6 Plus 414 × 736 1080 × 1920
آیفون 6 375 × 667 750 × 1334
آیپد Pro 1024 × 1366 2048 × 2732
آیپد ورژن ۳ و ۴ 768 × 1024 1536 × 2048
آیپد ایر ۱ و ۲ 768 × 1024 1536 × 2048
آیپد مینی 768 × 1024 768 × 1024
آیپد مینی ۲ و ۳ 768 × 1024 1536 × 2048
Nexus 6P 411 × 731 1440 × 2560
Nexus 5X 411 × 731 1080 × 1920
گوگل Pixel 411 × 731 1080 × 1920
گوگل Pixel XL 411 × 731 1440 × 2560
گوگل Pixel 2 411 × 731 1080 × 1920
گوگل Pixel 2 XL 411 × 823 1440 × 2880
سامسونگ Galaxy Note 5 480 × 853 1440 × 2560
ال جی G5 360w × 640 1440 × 2560
ال جی G4 360w × 640 1440 × 2560
ال جی G3 360w × 640 1440 × 2560
One Plus 3 480 × 853 1080 × 1920
سامسونگ Galaxy S9 360 × 740 1440 × 2960
سامسونگ Galaxy S9+ 360 × 740 1440 × 2960
سامسونگ Galaxy S8 360 × 740 1440 × 2960
سامسونگ Galaxy S8+ 360 × 740 1440 × 2960
سامسونگ Galaxy S7 360 × 640 1440 × 2560
سامسونگ Galaxy S7 Edge 360 × 640 1440 × 2560
Nexus 7 (2013) 600 × 960 1200 × 1920
Nexus 9 768 × 1024 1536 × 2048
سامسونگ Galaxy Tab 10 800 × 1280 800 × 1280
کروم بوک Pixel 1280 × 850 2560 × 1700

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

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

۵ نظر در مورد «آشنایی با متاتگ viewport برای طراحی سایت ریسپانسیو»

  • افتضاح بود برو اطلاعاتتو بیشتر کن

  • علیرضا می‌گوید:

    عالی بود!

  • ممنون خيلي مفيد وخوب بود،موفق باشيد.

  • یاهو می‌گوید:

    سلام

    ممونم از مطالب جالبتون
    من یه سوال داشتم. چطور میتونم از بزرگنمایی صفحه با ctrl+mousewheel یا توی موبایل جلوگیری کنم؟

    • با سلام
      اگر با تنظیم maximum-scale به نتیجه‌ی دلخواه نمی‌رسید، ممکن است بتوان با استفاده از جاوااسکریپت روی مرورگرهای رومیزی به نتیجه‌ای دست پیدا کرد و در غیر این صورت شاید هیچ راه حلی نداشته باشد. باید در نظر داشته باشید که محیط وب مثل محیط سیستم‌عامل نیست که هر کاری را روی هر مرورگری بتوان انجام داد.

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

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

مشاوره رایگان تلفنی
۶۵ ۸۹ ۹۶ ۸۸ - ۰۲۱
۹۱ ۸۴ ۹۶ ۸۸ - ۰۲۱