طراحی وب واکنش‌گرا -视گاه
- صفحه قبلی معرفی RWD
- صفحه بعدی نمای شبکه RWD
viewport چیست؟
viewport (viewport) بخشی از صفحه وب است که کاربر می‌تواند مشاهده کند.
viewport بسته به دستگاه متفاوت است، در تلفن‌های موبایل کوچکتر از صفحه نمایش کامپیوتر خواهد بود.
قبل از تبلت و تلفن، صفحات وب فقط برای صفحه نمایش کامپیوتر طراحی شده بودند و طراحی صفحات وب ثابت و اندازه ثابت بسیار معمول بود.
سپس، وقتی شروع به استفاده از تبلت و تلفن کردیم، صفحات وب با اندازه ثابت خیلی بزرگ هستند و نمی‌توانند به اندازه视پورت مناسب شوند. برای حل این مشکل، مرورگرهای این دستگاه‌ها کل وب‌سایت را به تناسب کوچک می‌کنند تا به اندازه صفحه نمایش مناسب شوند.
این هنوز کامل نیست! فقط یک راهنمایی سریع است.
تنظیم视پورت
HTML5 روشی را معرفی کرده است که طراحان وب می‌توانند از طریق <meta> برچسب‌ها را شامل شوید تا از视پورت کنترل شود.
شما باید در تمامی صفحات وب‌سایت خود این <meta> عنصر viewport:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
این دستورالعمل‌ها به مرورگر کمک می‌کنند تا سایز و میزان بزرگنمایی صفحه را کنترل کند.
width=device-width بخشی از تنظیمات صفحه را به عرض صفحه نمایش دستگاه پیروی می‌کند (به ازای هر دستگاه).
هنگامی که مرورگر برای اولین بار صفحه را بارگذاری می‌کند،initial-scale=1.0 بخشی از تنظیمات اولیه میزان بزرگنمایی.
در زیر مثال‌هایی از وب‌سایت‌هایی است که بدون برچسب meta viewport و با برچسب meta viewport هستند:
توجه:اگر شما این صفحه را با تلفن یا تبلت خود مشاهده می‌کنید، می‌توانید بر روی دو لینک زیر کلیک کنید تا تفاوت‌ها را مشاهده کنید.
محتوای خود را به اندازه视پورت تنظیم کنید
عادت کاربران این است که در رایانه‌های رومیزی و دستگاه‌های موبایل به صورت عمودی وب‌سایت را جلو ببرند، نه افقی!
بنابراین، اگر مجبور به کاربران شود تا برای مشاهده کل وب‌سایت از حرکت افقی یا کوچک‌سازی استفاده کنند، تجربه کاربری بدی به وجود می‌آید.
قوانین اضافی که باید رعایت شوند:
1. از عناصر width fix بزرگ استفاده نکنید - به عنوان مثال، اگر عرض تصویر بزرگتر از عرض视گاه باشد، ممکن است منجر به اسکرول افقی در视گاه شود. لطفاً مطمئن شوید که این محتوا برای عرض视گاه مناسب است.
2. محتوا نباید به وضوح خاصی از عرض视گاه تکیه کند تا به خوبی نمایش داده شود - به دلیل اینکه اندازه و عرض صفحه و ویدئو در دستگاه‌ها بسیار متفاوت است، محتوا نباید به وضوح خاصی از عرض视گاه تکیه کند.
3. استفاده از جستجوهای رسانه‌ای CSS برای تطبیق استایل‌های مختلف برای صفحه‌های کوچک و بزرگ - تنظیم اندازه‌های absolute width بزرگ برای عناصر صفحه به دلیل اینکه این عناصر برای视گاه‌های کوچکتر بسیار پهن هستند، منجر به اینکه عناصر به بیرون از视گاه‌های کوچکتر می‌افتند می‌شود. به جای آن باید از مقادیر width相对 استفاده کنید، مانند width: 100%. همچنین باید از مقادیر absolute positioning بزرگ مراقبت کنید که ممکن است منجر به بیرون رفتن عناصر از视گاه‌های کوچکتر شود.
- صفحه قبلی معرفی RWD
- صفحه بعدی نمای شبکه RWD
