如何设置页面的最小宽度？

问题描述：

我添加了：style ='...'，但页面未按预期显示。使用鼠标，可以调整页面的宽度。这样做的正确方法是什么？

相关代码（简体，HTML + css）发布如下：

I added: style='...', but the page does not display as expected. Using mouse, the page's width can be adjusted. What's the proper way to do it?

The related codes (simplified, HTML + css) are posted below:

<!DOCTYPE html>
<html >
    <head>
    </head>

<body class="dbootstrap"   >

<div class="appHeader">
    <div class="headerTitle">
        <span id="headerTitleSpan">
            Washington xxxxxx Map Viewer
        </span>
        <div id="subHeaderTitleSpan" class="subHeaderTitle">
            by xxxxxxxx
        </div>
    </div>
    <div class="headImgButtons">
        <div class="headerLinksAdd">
            <div id="addDijit">
                <img id='imgAddRecords' src="images/DataAdd.png" alt="Add Records" title="Add Records" />
            </div>
        </div>
        <div class="headerLinksEdit">
            <div id="editDijit">
                <img id='imgEditRecords' src="images/EditingAttributes32.png" alt="Edit Records" title="Edit Records" /> 
            </div>
        </div>
    </div>
</div>

        
<!--<div class="app1" style="visibility:hidden;">-->
<div id="add_div" class="app1" >
	….
</div> <!-- "add_div"  -->
</body>
</html>

body, html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    /*font-family: Tahoma;*/
    font-size: 12px;  /* before 14px */
}
.appHeader {
    background: url("../images/linen.jpg") repeat-x scroll left top transparent; 
    /* background: url("../images/MetroBackgound.png") repeat-x scroll left top transparent; */
    height: 100px;  /* 70px for  Default.2aspx */ 
    margin: 0;
    padding: 0;
    width: 100%;
}
.appHeader2 {
    background: url("../images/linen.jpg") repeat-x scroll left top transparent; 
    /* background: url("../images/MetroBackgound.png") repeat-x scroll left top transparent; */
    height: 80px;
    margin: 0;
    padding: 0;
    width: 100%;
}
.appHeader .headerLogo {
    float: left;
    left: 30px;
    position: relative;
    top: 3px;
}
.appHeader .headerTitle {
    color:  #FFFFFF; 
    float: left;
    font-size: 20pt;  /*16pt; */
    font-weight: bold;
    left: 60px;
    top: 7px;  /* 15px for  Default.2aspx */ 
    position: relative;
}
.appHeader .subHeaderTitle {
    color: yellow;
    font-size: medium;  /*small;*/
    padding-left: 20px;
    bottom: 3px;
}
/* .appHeader .search {
    float: left;
    left: 80px;
    position: relative;
    top: 18px;
}  */
/* 08/21/2015 - Tool Icons   */
.appHead .headImgButtons {
    position:absolute;
    margin-left:200px;
}
.appHeader .headerLinksAdd {
    float: right;
    color: #FFFFFF;
    position: relative;
    top: 10px;
    right: 310px;
    text-align: right;
    width: auto;
}
.appHeader .headerLinksEdit {
    float: right;
    color: #FFFFFF;
    position: relative;
    top: 10px;
    right: 240px;
    text-align: right;
    width: auto;
}
.appHeader .headerLinksHelp {
    float: right;
    color: #FFFFFF;
    position: relative;
    top: 10px;
    right: 170px;
    text-align: right;
    width: auto;
}
.appHeader .headerLinksInfo {
    float: right;
    color: #FFFFFF;
    position: relative;
    top: 10px;
    right: 100px;
    text-align: right;
    width: auto;
}
.appHeader .headerLinksLogout {
    float: right;
    color: #FFFFFF;
    position: relative;
    top: 10px;
    right: 30px;
    text-align: right;
    width: auto;
}

.appHeader .headerLinks {
    float: right;
    color: #FFFFFF;
    position: relative;
    top: 27px;
    right: 10px;
    text-align: right;
}
/* Tool Icons   */
.appHeader .headerLinks a {
    color: #FFFFFF;
}

答

答案很简单。你不能，你不应该这样做！浏览器是一个沙箱，只显示内容，未经用户许可，不得与浏览器外的任何内容进行交互。您无法控制用户的系统，因此为什么要允许您控制浏览器窗口的大小。那些宽度小于900像素的设备呢？你正在关闭大部分的移动市场。

你需要做的是退后一步看看你的设计并问我为什么需要最小宽度？看起来你正在使用Bootstrap。我建议为此找到资源，然后再看看你的设计。

The answer is quite simple. You cannot and you should not do this! The browser is a sandbox and just displays the content and should never interact with anything outside the browser without the user's permission. You do not control the user's system, so why should you be allowed to control the size of the browser window. Also what about devices that are less than 900 pixels wide? You are shutting out most of the mobile market.

What you need to do is step back and look at your design and ask why do I need the minimum width?It looks like you are working with Bootstrap. I would suggest finding resources for that and take a second look at your design.

Prob。通过在main.css中添加

min-width：1080px;

到html {}来解决。线程可以关闭。感谢您的评论。

Prob. solved by adding
min-width: 1080px;
into html { } in my main.css. The thread can be closed. Thanks for your review.

如何设置页面的最小宽度？

相关推荐