Question

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

我想在更改浏览器窗口大小时停止调整内容大小。为此，我使用了min-width
问题是当我看到ex：iPad的响应式布局时，我设置的min-width的布局有上限。没有min-width我的响应式设计正常工作。
如何在浏览器调整大小时停止调整内容大小，但为ex：ipad或其他标签保持正确的布局。
例如：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');
    }
});

在给出最小宽度的同时保持响应式设计

1 个答案: