في عرض الهاتف المحمول، تحتوي قائمة الموضوعات على مساحة إضافية حول العنوان، عندما يحاول المستخدمون النقر على العلامة، يكون من الصعب النقر على العلامة نفسها.
في مرحلة ما، قمنا بزيادة مساحة العنوان عن قصد لجعله هدفًا أكبر للنقر (كبيرًا بما يكفي لتغطية الفئة/العنوان بحيث تنقر هذه العناصر على الموضوع بدلاً من ذلك)… ولكن يبدو أن هذا قد تراجع.
قد يكون من المفيد محاولة جعل الفئة/العلامة أهدافًا أكبر لجعلها قابلة للاستخدام بالفعل بدلاً من ذلك. سألقي نظرة.
كان هذا مقصودًا. قال @schleifer إنه لم ينقر أبدًا على تلك الحقول (العلامة، الفئة) على الهاتف المحمول لذا جعلنا العنوان هو الشيء الوحيد الذي يمكنك النقر عليه في قائمة الموضوعات للجوال. إذا كنا سنغير هذا، فيجب علينا مناقشته أولاً.
أعتقد أنه من الغريب بعض الشيء إذا كان يمكن النقر على الفئات والعلامات على سطح المكتب ولكن ليس على الهاتف المحمول. وإذا كان هناك مستخدمون يرغبون في التحقق من ذلك على الهاتف المحمول، فسيعتقدون أن الموقع به خلل، حيث إنه عند النقر مع الاستمرار على العنوان، من الواضح أنه عند تنشيطه، يتحول الحشو إلى اللون الرمادي ويغطي العنوان ونصف سطر الفئات/العلامات. إنه تصميم واجهة مستخدم غير عادي من وجهة نظري.
بالإضافة إلى ذلك، من تحليلي في GA، يصل أكثر من 80٪ من المستخدمين إلى مجتمعي عبر الهاتف المحمول، ولا يمكنني قول الشيء نفسه بالنسبة لـ meta ولكن أعتقد أن هناك فرصة كبيرة لأن ينقر المستخدم الخاص بي على تلك العلامات على الهاتف المحمول.
نعم بالتأكيد، قد لا يكون الأمر منطقيًا بعد، لكنني قررت إلقاء نظرة أخرى ومعرفة ما إذا كان قابلاً للتطبيق.
نعم، لقد عبثت بهذا قليلاً وهذه الروابط صغيرة جدًا بحيث لا يمكن النقر عليها وفقًا لمعظم معايير قابلية الاستخدام للجوال.
ومع ذلك، يمكننا القيام بعمل أفضل في التقاط هذه النقرات والتوقف عن الاعتماد على تداخل CSS هذا الذي كنا نقوم به… لقد كان دائمًا هشًا بعض الشيء اعتمادًا على المحتوى ولا يعمل بشكل جيد مع جميع السمات.
لقد حاولت استخدام JavaScript بدلاً من ذلك (بناءً على Clickable Topic):
سيضيف هذا أيضًا القدرة على جعل عناصر الصف السفلي قابلة للنقر مرة أخرى باستخدام بعض CSS:
CSS القديم كمرجع
.mobile-view .topic-list .topic-item-stats {
pointer-events: all;
}
تحديث: تغيرت هذه CSS قليلاً
.topic-list .topic-item-stats__category-tags {
.discourse-tag,
.badge-wrapper {
pointer-events: all;
}
}
