غطاء لوحة المفاتيح المحمول يغطي الواجهة، ولا يسمح للمستخدم بالتمرير

الدعم
1

لا يزال هذا معطلاً للغاية، ويؤثر على المستخدمين لدي عند التسجيل وتسجيل الدخول وعند إنشاء/تحرير المشاركات. لقد شاهدت هذا يحدث على الهواتف والأجهزة اللوحية. أعتقد أن أحد الأجهزة اللوحية على الأقل كان جهاز iOS، لكنني ألاحظ هذا في الغالب على أجهزة Android.

المنتدى الخاص بي محلي جغرافيًا، لذا غالبًا ما أتمكن من ملاحظة الأشخاص يتفاعلون معه شخصيًا.

أنا منفتح على إصلاح CSS في الوقت الحالي، وقد يكون من الجيد أن يصل الإصلاح إلى النواة. سأقوم بالتحديث هنا إذا وجدت حلاً.

3 إعجابات
3

هل جربت إصلاح CSS الخاص بـ Don؟

4

هذا ما نجح معي (في القالب الخاص بي):

custom.scss:

.mobile-view .modal {
  top: 0;
  height: 100vh;
  align-items: flex-start;
}
.mobile-view .modal .d-modal__container {
  height: 100vh;
}

.mobile-view #reply-control.open {
  top: 0;
  height: 100vh;
}

common/head_tag.html:

  const is_mobile = !!document.querySelector('.mobile-view')
  if (window.visualViewport && is_mobile) {
    window.visualViewport.addEventListener('resize', () => {
      const modal = document.querySelector('.mobile-view .modal .d-modal__container');
      if (modal) {
        modal.style.maxHeight = `${window.visualViewport.height}px`;
      }
      const dialog = document.querySelector('.mobile-view #reply-control.open');
      if (dialog) {
        dialog.style.maxHeight = `${window.visualViewport.height}px`;
      }
    });
  }

تؤدي هذه التغييرات إلى تجربة مستخدم أفضل بكثير:

  • يتم تخصيص مساحة الشاشة المحدودة للمهمة الحالية (حقول الإدخال) بدلاً من تقسيمها بين النافذة المنبثقة والخلفية
  • لا يتم إخفاء الحقول بواسطة لوحة المفاتيح، مع عدم قدرة المستخدم على التمرير
  • لا يحتاج المستخدم إلى الإغلاق، ثم الفتح، ثم الإغلاق، ثم فتح لوحة المفاتيح لملء جميع الحقول
  • لا يحتاج المستخدم إلى الكتابة بشكل أعمى في حقل لا يمكنه رؤيته

لا يزال هناك بعض عدم الاتساق بين المتصفحات. لا يبدو أن تغيير حجم JS يعمل في Chromium، ولكنه يعمل في Brave و Firefox. لكن تجربة Chromium لا تزال أفضل مع النوافذ المنبثقة في أعلى الشاشة، حيث لا توجد لوحة مفاتيح.

لماذا لم تنجح مقاربات CSS البحتة:

  • لا أعتقد أن env(keyboard-inset-height) يعمل خارج تطبيقات الويب التقدمية (PWA) على iOS
  • 100dvh من الناحية النظرية ستعمل ولكن يبدو أنها غير مدعومة بعد في متصفحي المحمول

سمعت أيضًا من أشخاص أنهم لم يتمكنوا من العثور على زر التسجيل. لذا:

عرض زر التسجيل طوال الوقت، لا تخفيه على الهاتف المحمول:

.panel .header-buttons .sign-up-button {
  display: inline-flex;
}

كانت كل هذه المشكلات تمنع الأشخاص من التسجيل في المنتدى، ومن إجراء مشاركتهم الأولى. لذا بينما قد يبدو الأمر بسيطًا، بالنسبة لي على الأقل كانت هذه إصلاحات ذات أولوية قصوى للغاية.

إعجاب واحد (1)
5

سأضطر إلى تجربة كلتا المجموعتين من التعليمات البرمجية للاختبار. نظرًا لأن لدي هذه المشكلة عند تحرير قوالب النماذج أو استخدام محرر السمات لـ CSS/html. لقد وجدت حلاً بديلاً لتلك عن طريق إضافة الكثير من الأسطر الفارغة. تبدو إصلاحات CSS هذه أفضل بكثير.

6

أعتقد أن الفريق يعمل بالفعل على ذلك

إعجابَين (2)
7

من الجيد أنه يحظى بالاهتمام… ولكن كما ذكرت، dvh لا يعمل في اختباراتي.

إعجاب واحد (1)
8

مرحبًا @bitmage، هل يمكنك نشر لقطات شاشة للمشاكل التي تواجهها على Android من فضلك؟ أو حتى مقاطع فيديو. أريد أن أتأكد من أننا نتحدث عن نفس الشيء. شكرًا لك!