Visualviewport api أقل من iOS 13

مرحبًا،

لاحظت أن Discourse تمكنت بطريقة ما من حساب الموقع العلوي للوحة المفاتيح الافتراضية على iOS.
هذا أمر مهم إذا كنت تريد وضع عنصر ما مباشرة فوق لوحة المفاتيح الافتراضية، مثل حقل الإدخال الذي أكتب فيه حاليًا.

لا يُعد هذا مشكلة على أجهزة أندرويد، حيث يتم دفع العناصر ذات التموضع الثابت (position: fixed) تلقائيًا إلى أعلى اللوحة البصرية للوحة المفاتيح عند إظهارها.

الحل البديل لـ iOS هو استخدام واجهة برمجة التطبيقات الخاصة بـ visualViewport https://developer.mozilla.org/en-US/docs/Web/API/Visual_Viewport_API.
المشكلة الوحيدة هي عدم وجود دعم للأجهزة التي تعمل بإصدارات iOS أقدم من 13…

لقد اختبرت حقل الإدخال نفسه على جهاز يعمل بإصدار iOS 12.1، ويبدو أن Discourse تمكنت من تكرار السلوك المطلوب حتى على إصدارات Safari غير المدعومة من iOS.

هل يمكن لأحد أن يوجهني نحو الحل الصحيح لتحقيق نفس النتيجة؟ سأكون ممتنًا جدًا لذلك :smiley:

مع خالص التحية،
فوتر فيرميرش

أتذكر أن هذا كان يُوصف بأنه “جبل من الحيل” كما سماه @sam، لست متأكدًا مما إذا كنت تريد حقًا التوجه إلى هناك..

إعجابَين (2)

يمكنني تخيّل أن الأمر يشبه تسلّق جبل من الحيل. لقد كدتُ أحطم رأسي في هذه المشكلة لعدة أيام، لذا أنا مستعدٌ ومستعدٌ تمامًا لتسلّق ذلك الجبل بكل سرور :grinning: ..

لقد اضطررتُ بالفعل إلى وضع حيلة غير أنيقة لمنع متصفح سفاري على الجوال من رفع الشريط العلوي الثابت عند التركيز على حقل إدخال. في الواقع، أعتقد أن الأمر لن يكون أسوأ بكثير مما اضطررتُ إلى فعله هناك لتحقيق ذلك :stuck_out_tongue_closed_eyes:

إعجابَين (2)

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

كانت غريبة للغاية. لذا، أنا سعيد لأن @pmusaraj قد قدّم تطبيقًا أكثر متانة بكثير.

5 إعجابات

الكود ذو الصلة لكلا الحلين موجود هنا: https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/app/lib/safari-hacks.js

ومع ذلك، كما هو موضح في ذلك الملف، سنقوم قريبًا بإزالة إصلاحات iOS 12. فقد صدرت iOS 14 هذا العام، ولا يزال حوالي 5% فقط من الأجهزة تعمل على iOS 12.

4 إعجابات

شكرًا لمشاركتك! :blush:

لقد ألقيت نظرة سريعة على حلك البديل، ويبدو أنك اعتمدت على تحديد أحجام جميع أحجام لوحات المفاتيح الممكنة بشكل ثابت؟

عندما يتم تعطيل الاقتراحات التلقائية، يتغير حجم لوحة المفاتيح، فكيف يتعامل النظام مع ذلك؟

لم أكن أعرف أن عدد المستخدمين الذين لا يزالون يستخدمون iOS 12 قليلًا بهذا القدر. هل أنت متأكد من أن نسبة 5% فقط من المستخدمين ما زالوا يستخدمون iOS 12 أو إصدارات أقدم؟ في هذه الحالة، قد يكون من إضاعة الوقت التركيز على تلك المشكلة تحديدًا.

لقد قمت بالتحقق على جهاز iPhone 6 يعمل بنظام iOS 2.14

تعمل طريقة الحل البديلة بشكل مثالي عند تمكين الاقتراحات التلقائية… أما عند تعطيل الاقتراحات التلقائية، يظل هناك فراغ… ولكن كما ذكرت بالفعل، فإن عدد المستخدمين العالقين على نظام iOS 12 ضئيل جدًا… وهو أقل بكثير بالنسبة للمستخدمين العالقين على نظام iOS 12 مع تعطيل الاقتراحات التلقائية.

لذا فإن إصلاحك هو الأفضل الذي يمكن تخيله. شكرًا لمشاركتك! :wink:

لا أعرف ما إذا كانت هناك أرقام رسمية، لكن هذا الرسم البياني من Mixpanel يضع iOS 12 والإصدارات الأقدم عند 7%.

أتفق تمامًا على أنه لا يستحق جهدك التركيز على إصلاح هذه المشكلة لنظام iOS 12.

3 إعجابات