لماذا لا تظهر منطقة الصور بشكل صحيح على الموقع في الآيفون؟

مطور
1

إذًا، على 3 هواتف Android الخاصة بي (ماركات مختلفة، إلخ)، تبدو إحدى صفحات الويب الخاصة بي هكذا (كما ينبغي أن تكون):

androidex
androidex1080×2400 216 KB

على iPhone الخاص بشريكي، و iPhone الخاص بأحد أفراد العائلة، و iPhone الخاص بصديق، تبدو هكذا:

iphoneex
iphoneex1170×2532 242 KB

ملف SCSS الخاص بالجوّال الذي يعرض منطقة الصورة العلوية هو:

body.landing-page {
  &.blog {
    > .contents {
      max-width: 100%;
      width: 100%;
      display: block;
      padding: 1em;

      .page-first {
        display: none;
      }
    }
    .mobile-header .menu {
      background-color: #4a4a4a !important;
/*       height: min-content; */
    }
    
    .topic-list {
      grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
      padding: 2em 0 0 0;

      .topic-byline {
        .bull {
          padding: .2em .5em;
        }
      }
    }
  }

  .canvas {
    padding: 0.8em !important;
}

  .bull {
    display:none
    }

  &.blog-post {
    header {
      background-color: $secondary;
    }

    .container {
      width: 100%;
    }

    .post-container {
      width: 100%;
    }
    
    .title-container {
      background: no-repeat center/cover fixed;
      display: flex;
      flex-direction: column;
      min-height: 530px;
      max-height: 40%;
      justify-content: flex-end;
      align-items: center;

      .title {
        font-size: 2.0em !important;
        width: 100%;
        text-align: center;
/*         margin: 0 0 1em 0; */
      }

      .topic-byline {
        flex-direction: column;

        .bull {
          padding: .2em 1em;
        }
      }
    }

    img {
      max-width: 100%;
      height: auto;
    }
    
    .comment-container {
      .comment-heading h4 {
        text-align: center;
      }

      .comment-footer {
        padding: 0 2em;
        box-sizing: border-box;
        justify-content: center;
      }
    }
  }

  &.blog,
  &.blog-post {
    .btn-subscribe {
      padding: 0;

      .fixed-avatar {
        width: 60px;
        height: 60px;
      }
    }
  }
}

إذًا، لماذا يبدو أن الصورة لا يتم وضعها بشكل صحيح على كل iPhone، ولكنها كذلك على هواتف Android متعددة؟ كيف يمكنني إصلاح هذا؟ لقد علقت عليه لمدة 30 ساعة تقريبًا الآن. :وجه_مقلوب: الشيء الغريب أيضًا هو أنه في فحص العنصر الخاص بي، يظهر بشكل جيد هناك أيضًا على عدد قليل من إعدادات iPhone المسبقة… ولكن ليس على أجهزتهم الفعلية…

2

لم تتم صيانة المكون الإضافي لصفحات الهبوط منذ ما يقرب من عامين. سأكون حذرًا من استخدامه.

لست متأكدًا مما يحدث هناك، ولكن لديك بعض أخطاء بناء الجملة في الكود الخاص بك.

3

ماذا تقصد بأنه لم تتم صيانته؟ لقد قام @cabidop مؤخرًا بتحديث بعض الأشياء في جميع المكونات الثلاثة التي تم دمجها في الفروع الرئيسية… إلا إذا كنت تقصد شيئًا آخر :open_mouth:

GitHub - paviliondev/discourse-landing-pages: Adds landing pages to Discourse
GitHub - paviliondev/blog-landing-pages
GitHub - paviliondev/blog-landing-theme

أخطاء في الصيغة، هاه؟ هممم

4

مرحباً :waving_hand:

لم أختبره، لكن يبدو لي أنه ناتج عن background-attachment: fixed;

الكود الذي شاركته أعلاه يحتوي على:

.title-container {
  background: no-repeat center/cover fixed;
}

مما يعني:

.title-container {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed; // هذا يسبب المشكلة
}

هل background-attachment: fixed; ضروري في هذه الحالة؟

أعني، أعتقد أنه يخلق نوعًا من تأثير المنظر البصري (parallax). لكن هذا ليس أفضل حل لذلك… لأنه غير مدعوم بشكل كبير وربما غير ضروري لحالتك.

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

يا إلهي، هذا موقع ويب رائع حقًا الذي أشرت إليه، شكرًا لك. سأجرب هذا بمجرد أن يبدأ تشغيل خادم VPS الجديد الخاص بي و (آمل) أن يتم استعادة موقعي بالكامل!

6

إذًا، أنت تقول أن أحذف الجزء fixed؟

إذًا سيكون لدي:

.title-container {
  background: no-repeat center/cover;
}

؟