固定位置的标头坚持在桌面上，但不是在移动设备上？ [英] Fixed positioned header persists on desktop but not on mobile?

问题描述

如果缩小浏览器范围，您将看到 .header-mobile 元素。它是固定的。它坚持在桌面上，但在移动设备上它只是留在顶部。

If you narrow the browser you will see a .header-mobile element. It is fixed positioned. And it persists on desktop but on mobile it's just left on the top.

这是手机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：

The 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

可能是什么原因？

推荐答案

我不知道为什么，但我不得不补充：

I'm not sure why, but I had to add this:

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

这篇关于固定位置的标头坚持在桌面上，但不是在移动设备上？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！