css – 在将ipad从纵向旋转到横向时,Div保持相同的宽度

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

肖像：

从纵向旋转到横向后：

这是我用于该div的CSS：

nav {BACkground-image: linear-gradient(bottom,rgb(0,0) 15%,rgb(51,51,51) 69%);
    BACkground-image: -o-linear-gradient(bottom,51) 69%);
    BACkground-image: -moz-linear-gradient(bottom,51) 69%);
    BACkground-image: -webkit-linear-gradient(bottom,51) 69%);
    BACkground-image: -ms-linear-gradient(bottom,51) 69%);
    BACkground-image: -webkit-gradient(
    linear,left bottom,left top,color-stop(0.15,0)),color-stop(0.69,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自动填充屏幕的宽度而无需用户触摸它？

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

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