iPhone 网站图片区域显示异常，原因？

开发
1

所以，在我三部 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 小时了 :upside_down_face: 奇怪的是，在我的“检查元素”中，它在一些 iPhone 预设中也显示正常……但在他们的实际设备上却不行……

2

登陆页插件已经近2年没有维护了。我建议谨慎使用。

不确定那里发生了什么，但你的代码中有一些语法错误。

3

你是什么意思，它没有被维护？我最近让 @cabidop 更新了它合并到主分支的所有 3 个组件……除非你的意思是别的 :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; 是必需的吗？

我的意思是，我认为它可能会产生一种视差效果。但这并不是实现该效果的最佳解决方案……因为它支持性不强，而且可能对你的用例来说不是必需的。

1 个赞
5

哦，哇，你链接的那个网站真的很酷，谢谢。我会在我的新 VPS 启动并（希望）完全恢复我的网站后尽快尝试这个！

6

所以，你的意思是直接删除 fixed 部分？

那么我将得到：

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

？