آشنایی با متاتگ 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"> |
برای اینکه کاربرانی با محدودیت‌های جسمی یا کاربرانی که گوشی‌های موبایل با صفحات کوچک دارند، همیشه بهتر است از غیرفعال کردن user-scalable خودداری نمایید.
تعیین اندازه‌ی Viewport به صورت عددی
علاوه بر اینکه می‌توانید مقدار اندازه‌ی Viewport را متغیر در نظر بگیرید، با وارد کردن مقدار عددی به جای device-width می‌توانید مقدار پیش‌فرض ۱۰۰۰ پیکسل را نیز تغییر دهید
|
1 |
<meta name="viewport" content="width=1500, initial-scale=1"> |
قطعه کد بالا اندازه‌ی 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 |
طراحی سایت واکنش‌گرا و سئو
استفاده از موبایل برای مرور اینترنت روز به روز در حال افزایش است. بنابراین سایت‌هایی که برای موبایل آماده نباشند، از نظر کاربران و موتورهای جستجو، سایت‌هایی با کیفیت پایین در نظر گرفته می‌شوند. طراحی سایت ریسپانسیو سبب می‌شود یک نمره‌ی مثبت برای سئو سایت شما در نظر گرفته شود.
افتضاح بود برو اطلاعاتتو بیشتر کن
عالی بود!
ممنون خيلي مفيد وخوب بود،موفق باشيد.
سلام
ممونم از مطالب جالبتون
من یه سوال داشتم. چطور میتونم از بزرگنمایی صفحه با ctrl+mousewheel یا توی موبایل جلوگیری کنم؟
با سلام
اگر با تنظیم maximum-scale به نتیجه‌ی دلخواه نمی‌رسید، ممکن است بتوان با استفاده از جاوااسکریپت روی مرورگرهای رومیزی به نتیجه‌ای دست پیدا کرد و در غیر این صورت شاید هیچ راه حلی نداشته باشد. باید در نظر داشته باشید که محیط وب مثل محیط سیستم‌عامل نیست که هر کاری را روی هر مرورگری بتوان انجام داد.
سلام این رو میتونیم تو کد head.php قرار بدیم؟
با سلام. اگر منظور شما سیستم مدیریت محتوای وردپرس است، فایل سربرگ قالب معمولا با اسم header.php موجود است و در آن فایل می‌توانید تغییرات را انجام بدهید. برای اینکه سایت به طور کامل ریسپانسیو بشود، تغییرات دیگری هم در فایل‌های CSS قالب مورد نیاز است.