𝗧𝗵𝗲 𝗖𝗦𝗦 𝗠𝗲𝗱𝗶𝗮 𝗤𝘂𝗲𝗿𝘆 𝗧𝗵𝗮𝘁 𝗖𝗵𝗮𝗻𝗴𝗲𝗱 𝗠𝘆 𝗗𝗲𝘀𝗶𝗴𝗻 𝗔𝗽𝗽𝗿𝗼𝗮𝗰𝗵 استعلام وسائط CSS الذي غيّر نهجي في التصميم
كنت أصمم المواقع الإلكترونية من خلال التحقق من حجم الشاشة.
كنت أعتقد أنني بحاجة إلى معرفة ما إذا كان المستخدم يستخدم هاتفاً أم جهازاً لوحياً. حاولت التحقق مما إذا كان ارتفاع الشاشة أكبر من عرضها، لكن هذا كان يتحقق من الاتجاه (orientation) فقط، ولم يتحقق من نوع الجهاز.
لقد وجدت طريقة أفضل؛ استخدم استعلامات الوسائط (media queries) للتحقق من كيفية تفاعل الأشخاص مع موقعك.
يتحقق استعلام (hover) مما إذا كان الجهاز قادراً على تمرير المؤشر فوق العناصر (hover).
استخدم @media (hover: hover) للأجهزة التي تحتوي على ماوس أو لوحة لمس (trackpad).
استخدم @media (hover: none) للأجهزة التي تعمل باللمس فقط مثل الهواتف.
يساعدك هذا في إصلاح مشكلات الـ hover على الهواتف المحمولة. ففي الهواتف، غالباً ما تفشل قواعد الـ hover أو تعمل بشكل غريب. يمكنك كتابة كود لإظهار الأزرار على الهاتف ولكن إخفائها على سطح المكتب حتى يقوم المستخدم بتمرير المؤشر.
تجعل Tailwind هذا الأمر سهلاً باستخدام المتغيرات العشوائية (arbitrary variants):
يمكنك أيضاً التحقق من دقة المؤشر باستخدام (pointer).
• الماوس: hover ومؤشر دقيق (fine pointer) • لوحة اللمس (Trackpad): hover ومؤشر دقيق (fine pointer) • اللمس بالإصبع: لا يوجد hover ومؤشر خشن (coarse pointer) • القلم الرقمي (Stylus): عادةً hover ومؤشر دقيق (fine pointer)
إذا كنت تريد التحقق من كل جهاز إدخال بدلاً من الجهاز الرئيسي فقط، فاستخدم هذه الاستعلامات:
• @media (any-hover: hover) • @media (any-pointer: fine)
قد يشير الجهاز اللوحي المتصل بماوس إلى أن hover: none لمدخلاته الأساسية، ولكنه سيشير إلى any-hover: hover لوجود الماوس.
توقف عن التصميم بناءً على أحجام الشاشات فقط. ابدأ التصميم بناءً على كيفية لمس المستخدمين لواجهتك أو النقر عليها.