3

如果您缩小浏览器，您将看到一个.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

可能是什么原因？

4

2 回答 2

6

我不知道为什么，但我不得不添加这个：

  <meta content='width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no' name='viewport'>
于 2013-09-04T07:27:01.630 回答
2

Web 上有两个视口，布局和视觉视口。视觉是您当前看到的，布局视口是位置：固定元素所在的位置。有关详细信息，请参阅https://www.quirksmode.org/mobile/viewports.html 。

放大时， position: fixed 元素不会粘在视觉视口上，这样它们就不会挤满有限的屏幕空间。请参阅http://bokand.github.io/viewport/index.html以获取有关其工作原理的可视示例。

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

通常，页面会加载完全缩小，以便您可以看到整个页面。由于您的视口元标记具有 initial-scale=1，因此它实际上已放大。因此，当您滚动时，您正在移动视觉视口并且固定元素显示为“未固定”。如果您要完全缩小，您会看到固定的东西在您滚动时保持固定。

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

于 2018-09-25T16:57:55.777 回答