保持响应式设计，同时提供最小宽度

Question

我正在尝试创建一个响应式网页，并且我已经正确完成了大部分部分，但我在某些方面遇到了问题。

1. 当我更改浏览器窗口的大小时，我想停止调整内容的大小。 为此我使用了min-width

2. 问题是当我看到 ex: iPad 的响应式布局时，布局被我设置的 min-width 封顶。如果没有min-width，我的响应式设计可以正常工作。

3. 如何在浏览器调整大小时停止调整内容大小，但保持正确的布局，例如：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');
    }
});