Question

我目前正在开发我的第一个网站,并着手解决一个问题。当仪器打开时,沿底线(以下图象)的导航干.就会被罚款,当我把“iPad”改为“孔隙”。但是,当我从猪肉轮到地貌时,似乎保持同样的宽度,至少直到我触及屏幕。它不是一个大问题,因为它在我开学时回到了正常状态,而是一个不容置疑的眼光。我有几张图像:

Portrait:
enter image description here

After rotating from Portrait to Landscape: enter image description here

这里使用的是CSS I m:

nav {background-image: linear-gradient(bottom, rgb(0,0,0) 15%, rgb(51,51,51) 69%);
    background-image: -o-linear-gradient(bottom, rgb(0,0,0) 15%, rgb(51,51,51) 69%);
    background-image: -moz-linear-gradient(bottom, rgb(0,0,0) 15%, rgb(51,51,51) 69%);
    background-image: -webkit-linear-gradient(bottom, rgb(0,0,0) 15%, rgb(51,51,51) 69%);
    background-image: -ms-linear-gradient(bottom, rgb(0,0,0) 15%, rgb(51,51,51) 69%);
    background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.15, rgb(0,0,0)),
    color-stop(0.69, rgb(51,51,51)));
    border-top: 1px solid #000;

    text-align: center;
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 51px;
    color:#CCC;
    font-size:11.3px;
    font-weight:bold;
    overflow: hidden;
    margin: 0 auto 0;}

Is there a way of getting round this and having the div automatically fill the width of the screen without the user touching it?

Answer 1

我曾两次遇到过这一问题。我第一次不得不改变我的看法。

<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale = 1.0">

纽约总部

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

which worked, but the next time it would not, despite being essentially identical structure ...this time, I had 纽约总部 use media queries, so in the CSS, I set the footer 纽约总部 be position:fixed;bot纽约总部m:0;width:100% but followed it with:

@media screen and (max-device-width: 480px) and (orientation:landscape) {
    #navbar{width:480px;}
    #foot{width:480px;}
}
@media screen and (min-device-width: 481px) and (orientation:landscape) {
    #navbar{width:1024px;}
    #foot{width:1024px;}
}

Answer 2

我认为,这或许与贵重财产有关,而不是把它放在固定的雕像上,为什么不将其定为100%?

我在推介器上测试了它,但没有实际装置。似乎在SOS模拟器上工作。

我指的是:

<html>
    <head>
        <style>
            #nav{
                position:fixed;
                bottom:0px;
                left:0px;
                height:40px;
                width:100%;
                background:blue;
                text-align:center;
            }
        </style>
    </head>
    <body>
        <div id="nav">
            <p>My Navigation bar</p>
        </div>
    </body>
</html>

Answer 3

?

@media screen and (orientation: landscape){
  .fix-orientation { background:red; } /* This will cause a style recalculation */
}

友情链接