Question

我目前正在开发我的第一个网络应用程序并遇到了问题。当应用程序打开时，沿着底部的导航div（如下图所示）呈现正常，当我将iPad旋转为肖像时也是如此。但是当我从纵向旋转到横向时，它似乎保持相同的宽度，至少在我触摸屏幕之前。这不是一个大问题，因为当我开始滚动时它会恢复到正常状态，但看起来有些不整洁。我附上了一些图片：

人像：
enter image description here

从纵向旋转到横向后： enter image description here

这是我用于该div的CSS：

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;}

有没有办法绕过这个并让div自动填充屏幕的宽度而不需要用户触摸它？

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">

哪个有效，但下次不会，尽管基本上是相同的结构...这一次，我不得不使用媒体查询，所以在CSS中，我将页脚设置为position:fixed;bottom:0;width:100% 但跟着它：

@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％？

我在模拟器上测试过，但不是实际的设备。它似乎在iOS模拟器上运行良好。

以下是我的意思的一个例子：

<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

this修复怎么办？

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

将ipad从纵向旋转到横向时，Div保持相同的宽度

3 个答案: