Div остается одинаковой ширины при повороте ipad из портретной в альбомную - PullRequest
Новая
       0

Div остается одинаковой ширины при повороте ipad из портретной в альбомную

4 голосов
/ 14 января 2012

Сейчас я занимаюсь разработкой своего первого веб-приложения и столкнулся с проблемой.Когда приложение открыто, навигационная панель внизу (на рисунке ниже) отображается нормально, когда я поворачиваю iPad в портретную ориентацию.Но когда я поворачиваюсь от портрета к ландшафту, кажется, что он сохраняет ту же ширину, по крайней мере, пока я не коснусь экрана.Это не большая проблема, поскольку она возвращается к своему нормальному состоянию, когда я начинаю прокручивать, но выглядит немного неопрятно.Я приложил несколько изображений:

Портрет:
enter image description here

После поворота от Портрета в Пейзаж: enter image description here

Это CSS I 'm для этого div: 

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 автоматически заполнил ширину экрана, не касаясь его пользователем?

Ответы [ 3 ]

4 голосов
/ 22 июня 2012

Я сталкивался с этой проблемой дважды. В первый раз мне пришлось изменить метатег моего окна просмотра с 

<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;}
}
0 голосов
/ 20 сентября 2013

Как насчет этого исправления? 

@media screen and (orientation: landscape){
  .fix-orientation { background:red; } /* This will cause a style recalculation */
}
0 голосов
/ 18 января 2012

Я думаю, что это может быть связано с вашим свойством width, а не с фиксированным пикселем, почему бы не установить его на 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...