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

Question

我有一个带有 Logo 、菜单和搜索的标题。当我在桌面上时，我会按顺序显示所有元素，但如果我的窗口宽度小于 980 像素，菜单会隐藏(得到一个切换)，并且 Logo 会从 nav 中分离出来，并且附在标志后。如果宽度更大，则 Logo 将再次分离并附加到 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>

现在这个问题发生在手机上(从反馈来看，只有安卓)，当你点击输入字段输入搜索查询时，resize 被激活，并且搜索容器在同一个空间中分离和附着自己。我不知道为什么会这样。当我用调整大小注释 jquery 代码部分时，我可以毫无问题地在输入字段中键入。

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

Answer 1

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

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

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

停止调整窗口大小(这是导致问题的原因)，您现在可以在 android 上轻松输入:)