输入搜索按钮和搜索栏的兼容性问题

Question

我有一个搜索按钮，在屏幕宽度小于1080px的情况下打开一个顶部栏但是我在移动设备上遇到问题...触摸移动设备上的按钮，此处没有显示它的条形图你有一个例子{ {3}}

这是功能：

• 在屏幕上＆gt; 1080px：出现白线，点击搜索按钮
• 在屏幕上＆lt; = 1080px：出现白色顶部搜索栏，点击搜索按钮，白线显示为display：none

以下片段：

toggle();
window.onresize = function() {
    toggle();
}
function toggle() {
	var searchTop = document.getElementById('demo-1');	
	if (window.innerWidth <= 1080) {
		
		document.getElementById('demo-2').addEventListener('click', function(evt) {
		    
		    document.getElementById('demo-1').style.top = '0px';
		}, true);

		document.getElementById('demo-3').addEventListener('blur', function(evt) {
            document.getElementById('demo-1').style.top = '-60px';
		}, true);

	} else if (window.innerWidth > 1080) {
		document.getElementById('demo-1').style.display = 'none';
	}

}

body {
background-color: black;
}
#demo-1 {
  position: absolute;
  width: 100%;
  height: 60px;
  z-index: 300;
  transition: all 0.5s ease;
  top: -60px; }
#demo-1 input[type="search"] {
  background-color: #ffffff;
  padding-left: 50px;
  padding-right: 40px;
  width: 100%;
  height: 60px;
  color: #000000;
  border: none;
  opacity: 0.9;}
.subheader {
  position: absolute;
  top: 120px;
  width: 100%; }
#demo-2 {
  position: relative;
  display: inline-block;
  padding-right: 50px;
  float: right;
  z-index: 300; }
#demo-2 input[type="search"] {
  background: url(http://localhost/alanic/images/searchbutton.png) no-repeat 9px center;
  padding-right: 20px;
  padding-bottom: 5px;
  padding-left: 10px;
  -webkit-appearance: textfield;
  -webkit-box-sizing: content-box;
  width: 20px;
  cursor: pointer;
  border: none;
  transition: all 0.5s; }
#demo-2 input[type="search"]:hover {
  background-color: none; }
#demo-2 input[type="search"]:focus {
  width: 200px;
  padding-left: 40px;
  background-color: none;
  border-bottom: 1px solid #fff;
  color: #fff;
  cursor: auto; }
@media screen and (max-width: 1080px) {
 #demo-2 input[type="search"]:focus {
    display: none; } }
 #demo-2 input:-moz-placeholder {
  color: transparent; }
 #demo-2 input::-webkit-input-placeholder {
  color: transparent; }
 #demo-2 input:focus::-webkit-input-placeholder {
  color: #fff; }

<form id="demo-1">
  <input id="demo-3" type="search" name="buscar" placeholder="Search">
</form>			
<div class="subheader">
  <form id="demo-2">
    <input type="search" name="search" placeholder="Search">
  </form>
</div>