iPhoneのセクションバックグラウンドが正しくサイズ変更されていない

Question

セクションタグの固定またはスクロールアタッチメントを使用してセクションの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; 
     } 
    } 

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

あなたは、さらにサポートが必要な場合、私に教えてくださいあなたの質問のための作業のソリューションです。