最小幅を指定して応答性の高いデザインを維持する

Question

私は応答性の高いWebページを作成しようとしていますが、ほとんどの部分を正しく行っていますが、特定の領域で問題があります。

1. 私は私がブラウザウィンドウのサイズを変更したときの内容をリサイズ停止したいです。レイアウトは私が設定しているmin-widthのためにキャップされている、のiPad： は、そのために、私は元のための応答性のレイアウトを見たときに問題があるmin-width

2. 使用しています。 min-widthがなければ、私のレスポンシブデザインは正しく動作します。

3. ブラウザのサイズ変更中にコンテンツのサイズ変更を停止することはできますが、ex：ipadや他のタブのレイアウトは正しく維持できますか。

4. 例：Facebookは正しくこれを行います。

私のcss

.body_clr { 

    overflow-y: scroll; 
    width: 100%; 
    height: 100%; 
    min-width: 1129px; 
    position: fixed; 
    background-color: #ECF0F1; 
    font-family: "Gill Sans MT"; 

} 

.container_body { 

    width: 1130px; 
    margin: 0 auto; 

} 

@media screen and (max-width: 1139px) { 

    .container_body { 

     width: 100%; 
     margin: 0 auto; 

    } 

    .body_clr { 

     overflow-x: auto; 
     width: 100%; 
     position: fixed; 

    } 
} 

Htmlの

<div className="body_clr"> 

      <div className="container_body"> 

          <div className="Left"> 

           <LeftNav/> 

          </div> 

          <div className="Left"> 

           <MiddleNav/> 

          </div> 

          <div className="Left"> 

           <RightNav/> 

          </div> 
      </div> 
</div> 

Answer 1

$(document).ready(function() { 
    if(navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/iPod/i) || navigator.userAgent.match(/BlackBerry/i) || navigator.userAgent.match(/Windows Phone/i)){ 
     $('.body_clr').css('min-width','100%'); 
    } 
    else { 
     $('.body_clr').css('min-width','1129px'); 
    } 
});