تتشوه الرأس في شاشات العرض متوسطة الحجم في سمة Horizon

يعمل الرأس في Horizon بشكل جيد جدًا في معظم الأوقات، سواء على الهواتف المحمولة أو أجهزة سطح المكتب:

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

يبدو أن هذه المشكلة تظهر عند عرض يتراوح بين 640 و767 بكسل - للأسف، هذا هو العرض الذي يقع فيه هاتفي القابل للطيّ!

أستطيع إعادة إنتاج هذه المشكلة أيضًا - يبدو أن المشكلة تكمن في فئة contents داخل الرأس التي تعرض flex عند حجم عرض الهاتف القابل للطي/اللوحي الصغير @media (min-width: 640px) and (max-width: 767px):

يمكن إصلاحها عن طريق تغيير الخاصية إلى contents لهذا النطاق من العرض:

@media (min-width: 640px) and (max-width: 767.98px) {
  .d-header>wrap .contents {
    display: contents!important;
  }
}

أعتقد أن Discourse يستخدم 768px كحد فاصل بين اللوحي وسطح المكتب

أجد أن هذا الإعداد يجعل الأمور أسوأ!! فعند إيقافه، يصبح الترويسة مشوّشة في جميع الأحجام حتى 767 ما لم يُحدَّد الجهاز على أنه محمول.

لكن على الأقل هاتفك القابل للطي سعيد. لكن ليس متصفح سطح المكتب عندما تصبح الأمور صغيرة.

أعتقد أن هذا الإعداد قد اختفى الآن، لذا لم يعد هناك حل بديل.

لا يزال المشكلة قائمة مع Horizon.

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

يمكنني إعادة إنتاج المشكلة ببساطة عن طريق تصغير نافذة متصفحي على جهاز الكمبيوتر:

عندما تكون عريضة بشكل كافٍ:

عند تصغيرها قليلاً، تحدث بعض الأمور الغريبة (تتحول الشريط الجانبي/الرأس إلى اللون الأبيض) ولا أعتقد تماماً أن هذا مقصود:

عند التصغير أكثر، تظهر المشكلة بوضوح (أي حجم هاتف قابل للطي)

عند التصغير الشديد (حجم الهاتف العادي) يعود كل شيء إلى وضعه الطبيعي.

نعم، هذا مقصود.

بصراحة لا أفهم هذا، هذا العرض بعرض 644 بكسل:

لا يختفي صورة الملف الشخصي لدي عند أي عرض.

هل يمكنك إعادة إنتاج هذه المشكلة هنا على ميتا (مع هورايزون)؟

آه - نسيت أنني يمكنني فعل ذلك لأغراض إعادة الإنتاج! لا، لا يمكنني إعادة إنتاج المشكلة على Meta مع Horizon أيضًا.

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

واو، كان العثور على المشكلة سهلاً بشكل مفاجئ.

هذا المكون الخاص بالقالب غير متوافق مع Horizon:

وأنا أحب هذا القالب كثيراً! لا أستطيع تحمل أن يقفز القائمة إلى اليمين على الأجهزة المحمولة. إنها الأمور الصغيرة التي تجنّننا (حسناً، بعضنا)، أليس كذلك؟ ربما أعجبني وضعها هناك لأنني أعسر.

نعم، أفهم ذلك.

لا تتردد في ترك ملاحظة في موضوع موضوع Horizon الأصلي، حيث قلنا:

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

مرحبًا يا ناثان، لديّ هنا إصلاح:

ليلى، أنت رائعة! حالياً أستمتع بكل من برغر جانبي الأيسر AND Horizon على جهازي القابل للطي.

رائع!!!