Фиксированный заголовок сохраняется на рабочем столе, но не на мобильном?

Если вы сузите браузер, вы увидите .header-mobile элемент. Это фиксированное положение. И он сохраняется на настольном компьютере, но на мобильном он просто остается сверху.

Это мобильный CSS:

@media handheld, only screen and (max-width: 767px) {

  #header,
  #header-fixed {
    display: none;
  }

  #header-mobile {
    background: url(images/header-fixed-bg.png) repeat-x 0 0;
    border-bottom: 1px solid #111;
    display: block;
    position: fixed;
    top: 0;
    width: 100%;
    -webkit-box-shadow: rgba(0,0,0,0.3) 0 0 4px;
    -moz-box-shadow: rgba(0,0,0,0.3) 0 0 4px;
    box-shadow: rgba(0,0,0,0.3) 0 0 4px;
  }

HTML:

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </header>
  <div id="header-mobile">
    <div id="header-mobile-content">
      <h1 class="logo"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">test</a></h1>
      <a class="button button-small" href="">
        <img src="<?php bloginfo( 'template_url' ); ?>/images/icon-button.png" alt="" />
        <span>Request a quote</span>
      </a>
      <ul class="navigation-mobile">
        <li>
          <a class="responsive" href="#responsive">
            <span>Responsive Design</span>
          </a>
        </li>
        <li>
          <a class="touch" href="#touch">
            <span>Touch Friendly</span>
          </a>
        </li>
        <li>
          <a class="programming" href="#programming">
            <span>Custom Programming</span>
          </a>
        </li>
        <li>
          <a class="mobile" href="#mobile">
            <span>Mobile/Site Apps</span>
          </a>
        </li>
      </ul>
    </div>
  </div>

Живой сайт: http://www.hfwebdesign.com/?ModPagespeed=off

Что может быть причиной?

2 ответа

Я не уверен почему, но я должен был добавить это:

  <meta content='width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no' name='viewport'>

В Интернете есть два видовых экрана: макет и визуальные видовые окна. Визуал - это то, что вы видите в данный момент, область просмотра макета - это то место, где придерживаются фиксированные элементы. См. https://www.quirksmode.org/mobile/viewports.html для получения более подробной информации.

При увеличении позиции: фиксированные элементы не прилипают к визуальному окну просмотра, поэтому они не заполняют ограниченное пространство экрана. См. http://bokand.github.io/viewport/index.html для наглядного примера того, как это работает.

Что происходит в вашем примере: у вас есть width=device-width в вашем метатеге viewport; однако на вашей странице есть контент, который шире, чем ширина устройства. В Chrome это означает, что вы можете уменьшить масштаб, чтобы увидеть дополнительный контент. Кроме того, область просмотра макета имеет размер, равный визуальному окну просмотра при минимальном уровне масштабирования. Эти два факта в совокупности означают, что благодаря горизонтальному переполнению на странице область просмотра макета становится больше.

Обычно страница загружается полностью, чтобы вы могли видеть всю страницу. Поскольку метатег вашего окна просмотра имеет начальный масштаб =1, он фактически увеличен. Поэтому при прокрутке вы перемещаете визуальный видовой экран, и фиксированные элементы выглядят "нефиксированными". Если бы вам пришлось полностью уменьшить масштаб, вы бы увидели, что фиксированные объекты остаются фиксированными при прокрутке.

Вот почему добавление user-scalalble = no решает проблему для вас: минимальный масштаб установлен на 1, чтобы область просмотра макета соответствовала размеру визуального окна просмотра. В целом, хотя мобильные страницы должны избегать горизонтального переполнения, лучше было бы убедиться, что ваш контент вписывается в ширину устройства, чтобы предотвратить переполнение и увеличить область просмотра макета.

Другие вопросы по тегам