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

الدعم
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)