iPhone上的部分背景大小不正确[重复]

Posted 2023-03-11

【中文标题】iPhone上的部分背景大小不正确[重复]

【英文标题】：Section background on iPhone are not sizing correctly [duplicate]

【发布时间】：2017-11-14 23:05:03

【问题描述】：

我已经尝试了好几个小时，使用节标签的固定或滚动附件来正确调整 iPhone 上的背景大小，但我无法获得任何常见的修复工作。无论我尝试过什么，iPhone 的背景图片都会继续被夸大。

我尝试在元标记中包含“user-scalable=no”。 我尝试将该部分包含在高度和宽度为 100% 的 div 中。 我尝试使用 jQuery 强制调整大小。 我尝试为 iPhone 添加媒体查询以将背景附件设置为“初始”。

我仍然不明白我尝试实施的修复在理论上应该如何工作，但现在问题可能出在我的 css 或 html 上，而不是对我来说，因为这么多假设的修复都不起作用。

就我成为网页设计师的愿望而言，这无疑是一个挫折。 谢谢。

   <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

     <section id="congress-section" class="py-4">
       <div class="container">
         <div class="row py-3">
           <div class="col-md-6 mb-3">
             <div class="card card-outline-secondary">
               <div class="card-block">
                 <h3 class="text-center">Wednesday Pre-Party (optional)</h3>
                 <p class="lead">Day 0</p>
                 <hr>
                 <p><i class="fa fa-check"></i>Early Check-In & Registration</p>
                 <p><i class="fa fa-camera-retro"></i>Tour Around Bologna</p>
                 <p><i class="fa fa-glass"></i>Party alla bolognese</p>
               </div>
             </div>
           </div>
           <div class="col-md-6 mb-3">
             <div class="card card-outline-secondary">
               <div class="card-block">
                 <h3 class="text-center">Thursday: 9 - 17</h3>
                 <p class="lead">Day 1</p>
                 <hr>
                 <p><i class="fa fa-check"></i>Registration</p>
                 <p><i class="fa fa-quote-left"></i>Keynote</p>
                 <p><i class="fa fa-cutlery"></i>Lunch & Coffee Time Gratis</p>
                 <div class="col-11 offset-1 subicon">
                   <p><i class="fa fa-leaf"></i>Vegan Options</p>
                 </div>
                 <p><i class="fa fa-users"></i>Share Experience & Give Feedback in Alternative Groups</p>
                 <p><i class="fa fa-beer"></i>A Pizza in Piazza Party (Night)</p>
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
   </section>



  #congress-section 
      background: url(../img/police2_2.jpg);
      background-position: bottom;
      background-size: cover;
      background-repeat: no-repeat;
      background-attachment: fixed;
      color: $color3;
    

    @media (max-width: 767px) 
      #congress-section 
        background-attachment: initial;
      
    

【问题讨论】：

我已经尝试过这个响应，但没有成功，但我发现我的 scss 编译存在问题，而不是我之前尝试过的所有解决方案。现在每一个都有效。谢谢！

【参考方案1】：

这是您问题的有效解决方案

<meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

     <section id="congress-section" class="py-4">
       <div class="container">
         <div class="row py-3">
           <div class="col-md-6 mb-3">
             <div class="card card-outline-secondary">
               <div class="card-block">
                 <h3 class="text-center">Wednesday Pre-Party (optional)</h3>
                 <p class="lead">Day 0</p>
                 <hr>
                 <p><i class="fa fa-check"></i>Early Check-In & Registration</p>
                 <p><i class="fa fa-camera-retro"></i>Tour Around Bologna</p>
                 <p><i class="fa fa-glass"></i>Party alla bolognese</p>
               </div>
             </div>
           </div>
           <div class="col-md-6 mb-3">
             <div class="card card-outline-secondary">
               <div class="card-block">
                 <h3 class="text-center">Thursday: 9 - 17</h3>
                 <p class="lead">Day 1</p>
                 <hr>
                 <p><i class="fa fa-check"></i>Registration</p>
                 <p><i class="fa fa-quote-left"></i>Keynote</p>
                 <p><i class="fa fa-cutlery"></i>Lunch & Coffee Time Gratis</p>
                 <div class="col-11 offset-1 subicon">
                   <p><i class="fa fa-leaf"></i>Vegan Options</p>
                 </div>
                 <p><i class="fa fa-users"></i>Share Experience & Give Feedback in Alternative Groups</p>
                 <p><i class="fa fa-beer"></i>A Pizza in Piazza Party (Night)</p>
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
   </section>



  #congress-section 
      display: inline-block;
      width:100%;
      background: url(../img/police2_2.jpg);
      background-position: bottom;
      background-size: cover;
      background-repeat: no-repeat;
      background-attachment: fixed;
      color: $color3;
    

    @media (max-width: 767px) 
      #congress-section 
        background-size: cover;
      
    

如果您需要进一步的帮助，请告诉我。

【讨论】：

此解决方案确实有效，但不适用于我的项目，这导致我重新评估工作流程中的每一步。几个小时后，我在我的 sass 编译中发现了这个问题。感谢您的帮助！