单击输入字段触发器窗口调整大小

Question

我有一个标题,菜单和搜索标题.当我在桌面上时,我按顺序显示所有元素,但如果我的窗口宽度小于980px,则菜单隐藏(获取切换),徽标与徽标分离nav并附加.如果宽度更大,徽标将再次分离并附加到DOM中的旧位置.

    $(window).on('resize', function() {
      if ($(window).width() < 980) {
        $('#search-container').detach().insertAfter('#logo');
      } else {
        $('#search-container').detach().insertAfter('#main_menu');
      }
    });

#logo {
  display: block;
  margin: 10px auto 15px;
  text-align: center;
}
#search-container {
  display: inline-block;
  vertical-align: top;
  margin-top: 8px;
  background: #fff;
  border-radius: 5px;
  padding: 1px 10px;
}
#search-container .header_search {
  display: inline-block;
  line-height: 6px;
}
#search-container input {
  border: 0;
  background-color: transparent;
  font-style: italic;
  color: rgb(114, 114, 114);
  color: rgba(114, 114, 114, 0.5);
  font-size: 14px;
  line-height: 25px;
  font-weight: 400;
  text-align: left;
  display: inline-block;
  vertical-align: top;
  width: auto;
}
#search-container input:active,
#search-container input:focus {
  outline: none;
  border: 0;
}
#search-container .submit {
  display: inline-block;
  margin-left: 10px;
  cursor: pointer;
  z-index: 10;
}
#search-container .submit i {
  color: #d3031c;
  font-size: 26px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="logo">Logo</div>

<div class="menu_wrapper">
  <nav>
    <ul id="main_menu" class="">
      <li>Menu1</li>
      <li>Menu2</li>
      <li>Menu3</li>
    </ul>
    <div id="search-container" class="search-box-wrapper hide">
      <div class="header_search">
        <form name="search" id="search" method="get" action="#">
          <input name="s" type="text" placeholder="Search" value="Search">
          <a class="submit"><i class="fa fa-search"></i></a>
        </form>
      </div>
    </div>
  </nav>
</div>

现在问题发生在移动电话上(并且来自反馈,仅在Android上),当您点击输入字段以输入搜索查询时,resize正在激活,并且搜索容器将分离并将其自身附加到同一空间中.我不知道为什么会这样.当我使用resize注释jquery代码的一部分时,我可以输入输入字段而不会出现问题.

为什么点击会触发调整大小？我检查了媒体查询,我没有以任何方式扩展该元素.

Answer 1

我仍然不知道为什么会发生这种情况（调整大小），但我找到了解决方案：

我正在关闭$('#search-container')单击事件时调整窗口大小：

$('#search-container').on('click', function(){
    $(window).off('resize');
});

阻止窗口调整大小（这导致了问题），您现在可以轻松地在 Android 上打字:)