CSS неправильно отображается на iOS при увеличении

Я хочу отобразить боковую панель. Мой CSS работает очень хорошо при отображении в настольном браузере, даже когда я увеличиваю масштаб. Однако на устройстве iOS увеличение масштаба страницы (через масштабирование) отображает боковую панель над содержимым. Последнее, что я проверял, я помню, что у меня было такое же поведение в браузере Android по умолчанию и в Chrome Beta.

Я разместил (в основном) минимальную демонстрационную страницу, которая иллюстрирует это поведение: http://www.seas.upenn.edu/~dange/test/test.html

Однако, если вы используете мобильный браузер, такой как мобильный Safari, мы получим следующее: снимок экрана iOS

Вот CSS, используемый для отображения этой страницы:

/* Sidebar */

header {
  border-right: 1px solid #AAA;
  float: left;
  padding: 0 10px;
  position: fixed;
  width: 200px;
  bottom: 0;
  left: 0;
  right: auto;
  top: 0;
}

#site-title {
  font: bold 36px sans-serif;
  margin: 1em 0;
  text-align: center;
}

/* Navigation menu in sidebar */

nav {
  font: 18px sans-serif;
  margin: 2em auto;
  width: 140px;
}

    nav > ul {
      list-style: none;
      padding: 0 10px;
    }

    nav li {
      margin: 0;
      text-align: center;
    }

    nav a {
      display: block;
      padding: 8px 10px;
      text-decoration: none;
    }

/* Content "Pane" */

#content,
footer {
  margin-left: 220px;
  max-width: 620px;
  padding: 0 10px;
  position: relative;
}

#content p {
  font: 18px / 30px serif;
}

footer {
  border-top: 1px solid #AAA;
  font: 14px serif;
}

... и упрощенный HTML-документ:

<body>
  <header>
    <h1 id="site-title">Lorem Ipsum</h1>
    <nav>
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
      </ul>
    </nav>

  </header>

  <section id="content">
    <article>
      <p>...</p>
      <p>...</p>
      <p>...</p>
    </article>
  </section>

  <footer>
    <p>...</p>
  </footer>
</body>

Я знаю, что это неоптимальный макет для мобильных браузеров (и я планирую улучшить свой настоящий сайт, чтобы он хорошо выглядел на мобильном устройстве). Но пока я хочу избавиться от этой проблемы.


css mobile-safari
person kibibyte    schedule 01.07.2012    source источник
comment
Возможно, стоит использовать em вместо px.   -  person Charles Beattie    schedule 01.07.2012
comment
Почему я должен? (серьезный вопрос)   -  person kibibyte    schedule 01.07.2012
comment
Пиксели должны означать фактические пиксели, которые не имеют особого смысла, когда у вас есть дисплеи Ultra HD. Это не решит вашу проблему, но это лучшая практика при работе с широким спектром разрешений экрана. Прочитайте m.alistapart.com/articles/fluidgrids.   -  person Charles Beattie    schedule 01.07.2012

Ответы (3)


arrow_upward
0
arrow_downward

Попробуйте удалить позицию, исправленную для заголовка, я не могу ее проверить, пробовал на скрипке, но масштабирование, похоже, не работает так, как я ожидал. но если ваш тег заголовка зафиксирован слева, то имеет смысл разместить его слева. Кажется, iOS рассматривает масштабирование как изменение размера окна или что-то в этом роде, поэтому оно заставляет css реагировать или что-то в этом роде.

person Huangism    schedule 04.07.2012
comment
В моем случае желательно фиксированное положение заголовка :-) - person MacMark; 30.04.2013

arrow_upward
0
arrow_downward

Я исправил аналогичную проблему на своих сайтах, используя оболочку прямо внутри тега body.

#wrapper{
     width:840px;
     overflow:auto;
}

НО я думаю, что боковая панель на мобильных устройствах — не очень хорошая идея, если только ее нельзя скрыть динамически. На мобильных устройствах может быть лучше расположить боковую панель поверх контента:

@media (max-width: 480px) {
     #content, nav{width:100%; margin:10px 0; position:relative;}
}

Вышеупомянутое не проверено.

person Matthew    schedule 30.04.2013
comment
Ваше упоминание о переполнении вдохновило меня и напомнило, что я уже использовал z-индекс для двух элементов div. Хитрость заключается в том, чтобы присвоить навигации не только меньший z-индекс, чем основной контент, но и дать ему отрицательный z-индекс. За это вдохновение вы получаете +50. Поздравляю! - person MacMark; 30.04.2013

arrow_upward
0
arrow_downward

Хитрость заключается в том, чтобы присвоить элементу навигации («заголовку») не только меньший z-индекс, чем основной контент, но и присвоить ему отрицательный z-индекс, например -3. Дайте div основного контента z-индекс +4 или что-то еще.

Теперь, когда вы увеличиваете основной контент с помощью Mobile Safari, элемент навигации останется там, как и раньше, но будет скрыт за основным контентом, пока вы снова не уменьшите масштаб.

Радоваться, веселиться!

Редактировать: Негатив — не такая уж хорошая идея, поскольку он делает ссылки неприкосновенными. По крайней мере в моем случае ;-)

Редактировать 2: z-index, похоже, работает в Mobile Safari только для элементов, свойство position которых было явно установлено как абсолютное, фиксированное или относительное.

person MacMark    schedule 30.04.2013