Question

我已经尝试了几个小时来正确调整iPhone上的背景大小，使用固定或滚动附件到section标签，但我无法使任何常见的修复工作。无论我尝试过什么，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;
      }
    }

Answer 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;
      }
    }

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

iPhone上的部分背景未正确调整大小

1 个答案: