Question

如果缩小浏览器范围，您会看到.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

可能是什么原因？

Answer 1

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

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

Answer 2

网络上有两个视口，即布局和可视视口。视觉效果是您当前所看到的，布局视口是位置：固定元素将坚持。有关更多详细信息，请参见https://www.quirksmode.org/mobile/viewports.html。

放大时，位置：固定元素不会粘在视觉视口上，以免它们挤满有限的屏幕空间。有关其工作原理的直观示例，请参见http://bokand.github.io/viewport/index.html。

您的示例中发生了什么：视口元标记中有width=device-width；但是，页面上的某些内容比设备宽度还宽。在Chrome中，这意味着您可以缩小以查看更多内容。此外，布局视口的大小等于最小缩放级别下的可视视口。结合这两个事实，意味着页面上出现水平溢出，布局视口就会变大。

通常，页面将完全缩小加载，因此您可以看到整个页面。由于您的视口meta标签的initial-scale = 1，因此实际上已放大。因此，在滚动时，您将移动视觉视口，固定元素显示为“未固定”。如果要完全缩小，则会看到固定的内容在滚动时保持不变。

这就是为什么添加user-scalalble = no可以为您解决此问题的原因：最小比例设置为1，因此布局视口将与视觉视口大小匹配。不过，一般而言，移动页应避免水平方向的溢出，这里最好的解决方法是确保您的内容适合设备宽度，以防止溢出并扩大布局视口。

固定定位标题在桌面上保留但在移动设备上不存在？

2 个答案: