کوئری رسانهای CSS که رویکرد طراحی من را تغییر داد
من قبلاً وبسایتها را با بررسی اندازه صفحه نمایش طراحی میکردم.
فکر میکردم باید تشخیص دهم که کاربر از گوشی استفاده میکند یا تبلت. سعی کردم بررسی کنم که آیا ارتفاع صفحه از عرض آن بیشتر است یا خیر. این کار فقط جهت (orientation) را بررسی میکرد و نوع دستگاه را تشخیص نمیداد.
راه بهتری پیدا کردم. از media queryها برای بررسی نحوه تعامل افراد با سایت خود استفاده کنید.
کوئری (hover) بررسی میکند که آیا یک دستگاه میتواند روی عناصر نگه داشته شود (hover) یا خیر.
برای دستگاههایی که ماوس یا ترکپد دارند، از @media (hover: hover) استفاده کنید.
برای دستگاههای صرفاً لمسی مانند گوشیها، از @media (hover: none) استفاده کنید.
این کار به شما کمک میکند تا مشکلات مربوط به hover را در موبایل برطرف کنید. در گوشیها، قوانین hover اغلب با خطا مواجه میشوند یا رفتار عجیبی دارند. میتوانید کدی بنویسید که دکمهها را در موبایل نشان دهد، اما در دسکتاپ تا زمانی که کاربر روی آنها نگه ندارد (hover)، آنها را مخفی نگه دارد.
Tailwind این کار را با استفاده از variantهای دلخواه (arbitrary variants) آسان میکند:
همچنین میتوانید دقت اشارهگر را با (pointer) بررسی کنید.
• ماوس: hover و اشارهگر دقیق (fine pointer) • ترکپد: hover و اشارهگر دقیق (fine pointer) • لمس با انگشت: بدون hover و اشارهگر درشت (coarse pointer) • قلم (Stylus): معمولاً hover و اشارهگر دقیق (fine pointer)
اگر میخواهید به جای فقط دستگاه اصلی، تمام دستگاههای ورودی را بررسی کنید، از اینها استفاده کنید:
• @media (any-hover: hover)
• @media (any-pointer: fine)
یک تبلت که ماوس به آن متصل شده است، ممکن است برای ورودی اصلی خود hover: none را گزارش دهد. اما چون ماوس حضور دارد، any-hover: hover را گزارش خواهد کرد.
طراحی کردن را فقط بر اساس اندازه صفحه نمایش متوقف کنید. طراحی را بر اساس نحوه لمس یا کلیک کاربران روی رابط کاربریتان شروع کنید.