Div остается такой же шириной при вращении ipad от портрета к пейзажу

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

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

После поворота с портретной на ландшафтную: enter image description here

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

источник

2012-01-13 David

Я изменил «положение: исправлено;» на относительное, и это отсортировало проблему, но очевидно, что теперь навигация не фиксируется в нижней части страницы, поэтому ее не так много решения, но ясно, что где проблема лежит. Любые идеи кто-нибудь? – David

Можете ли вы опубликовать остальную часть своего кода? – Wex

У меня действительно нет места, чтобы опубликовать все это в комментарии, и это не позволит мне редактировать свой первый пост, потому что я новичок. Структура в основном

с навигацией, которая является CSS выше и navContent, является следующим: '#navContent {width: 550px; margin: 0 auto 0; } ' – David

Я думаю, что это может быть связано с вашим свойством 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>

источник

2012-01-17 21:02:37 jonhurlock

Привет, ширина навигационного div в настоящее время установлена на 100%, div внутри него установлен на 550 пикселей; но я не думаю, что это вызывает проблемы.Когда он идет от портрета к пейзажу, он поддерживает ширину экрана в портрете, который больше 550 пикселей (примерно на 200 пикселей от того, что я помню). – David

@Kai Right Я думаю, что это общая проблема с вашей таблицей стилей. Если вы разместили больше кода, то есть html и css, я мог бы помочь вам больше. Предлагаю вам ознакомиться с следующим ** [link] (http://www.roccles.com/?p=140) **. Он использует инфраструктуру мобильных устройств jQuery и расскажет вам, как определить изменения ориентации, и дает пример изменения контента в соответствии с изменениями ориентации. Если вы дадите телу класс ландшафта или портрета, то есть body.landscape и body.portrain, и создайте стили для каждого из них, чтобы исправить вашу проблему. – jonhurlock

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

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

источник

2012-06-22 04:29:11

Смена метатега работала для меня! Большое спасибо человеку! – Stefan

-2

насчет this исправить?

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

источник

2013-09-19 21:36:19 Adaptabi

Это может работать в браузере Galaxy S3, но это не работает для iPad Safari (только что протестировано). См. [Мой ответ] (http://stackoverflow.com/questions/7919172/what-is-the-best-method-of-re-rendering-a-web-page-on-orientation-change/31357325#31357325) для рабочего решения, которое заставляет плавать. –

Div остается такой же шириной при вращении ipad от портрета к пейзажу

ответ

Смежные вопросы