固定定位的标题在桌面上持续存在，但在移动设备上不存在? [英] Fixed positioned header persists on desktop but not on mobile?

问题描述

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

这是移动 CSS:

@media 手持设备，只有屏幕和(最大宽度:767px){#标题，#header 固定 {显示:无；}#header-移动{背景: url(images/header-fixed-bg.png) repeat-x 0 0;边框底部:1px 实心 #111；显示:块；位置:固定；顶部:0；宽度: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;框阴影:rgba(0,0,0,0.3) 0 0 4px;}

HTML:

 <li><a class="touch" href="#touch"><span>触摸友好</span></a><li><a class="programming" href="#programming"><span>自定义编程</span></a><li><a class="mobile" href="#mobile"><span>移动/网站应用</span></a>

实时站点:http://www.hfwebdesign.com/?ModPagespeed=off

可能是什么原因?

解决方案

我不知道为什么，但我必须添加:

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.

This is the 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;
  }

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>

Live site: http://www.hfwebdesign.com/?ModPagespeed=off

What could be the reason?

解决方案

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屋！