Question

使用android移动设备渲染website的一部分时，我感到非常奇怪。

用户开始输入内容后，我网站上的搜索输入字段就会缩小，并且该页面似乎暂时打破了其样式表约束。

我很困惑，因为在iOS中不会发生这种异常，并且在响应模式下，我似乎无法使用任何Web检查器来产生该错误。

要复制该问题：

在您的android设备上打开我的website shop.php页面。
打开汉堡导航，然后在搜索输入字段中键入。

任何指导都将不胜感激，因为我在网上高低不下地解决问题而没有成功。

汉堡导航代码-html

<div id="menu-icon">


    <span class="first"></span><span class="second"></span><span class="third"></span>


</div>




<nav>









      <form class="search" method="get" action="results.php" autocomplete="off"> 


          <div>   

            <input type="search" autocomplete="off" autocorrect="off" autocapitalize="none" spellcheck="false" size="22" maxlength="22" name="searchterm" pattern="[a-zA-Z0-9\s]{0,25}" placeholder="search rowena mae products">

          </div>  


       </form>






          <ul>



                <?php

                      get_categories_within_hamburger();

                ?>





           </ul>


  </nav>

hamburgernav.css

@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 2) 
  and (orientation: portrait) {








      nav {

        width: 100%;

        /*width: 360px;*/

      }  




    #menu-icon {

        top: 18px;

    }



    nav ul li a {
        float: none;
        padding: 8px;
        display: block;
        color: antiquewhite;
        text-align: center;
        margin-bottom: 20px;
        font-size: 16px;
    }



    .search input {
        width: 100%;
        background: #FDFBF6;
        text-align: center;
        font-size: 16px;
        height: 38px;


    }




}

搜索输入字段在Android上的用户参与度上有所下降

0 个答案: