时间戳

首页 > 解决方案 > jquery 下拉菜单和文本框在 ios chrome 浏览器上不起作用

android - jquery 下拉菜单和文本框在 ios chrome 浏览器上不起作用

问题描述

我有一个非常基本的搜索页面，带有下拉菜单和文本框。

该片段如下所示

<div class="container" style="width: 100%;">
   <div class="row">
        <div class="input-group col-sm-4 col-md-4" style="float: left; margin-bottom: 10px; max-width:0px;">
           <span class="input-group-addon" id="basic-addon2">Business Name</span>
           @Html.LabelFor(m => m.Parameters.BusinessName, new { style = "display: none;" }) 
           @Html.TextBoxFor(m => m.Parameters.BusinessName, new { @maxlength = 50, @class = "form-control", @placeholder = "Enter a business name", @aria_describedby = "basic-addon2", @style = "width:350px;" })
        </div>

        <div class="input-group col-sm-4 col-md-4" style="float: left; margin-bottom: 10px; max-width:0px;">
           @Html.LabelFor(m => m.Parameters.BusinessNameSearchType, new { style = "display: none;" }) @Html.DropDownListFor(m => m.Parameters.BusinessNameSearchType, searchtypes, new { @class = "form-control", @style = "width:150px;" })
        </div>
   </div>
</div>

在页面上，此代码段如下所示。 它在台式机、安卓平板电脑和安卓手机 chrome 浏览器上的外观

我使用引导程序 3.3.5 和 jQuery 2.1.4。

当我使用 Chrome 作为浏览器时，它在台式机、Android 平板电脑和 Android 手机上运行良好。

但是，当我尝试在较新版本的 iPhone ios Chrome 浏览器上查看它时，文本框和下拉菜单都完全中断（因为变得完全不可用而中断）。

有趣的是，当我尝试在 Chrome 中将其模拟为 iPhone X 时，它也运行良好。

我对整个 ios 主题完全陌生。做一些基础研究让我相信旧版本的 bootstrap/jquery 可能是问题所在。

尝试更新到 bootstrap 4，这也导致将 jquery 更新到 3.0.0，完全破坏了整个应用程序，所以我不得不将其恢复。

在我深入研究整个 bootstrap/jquery 之前，谁能给我任何有用的指示，说明为什么 ios 如此挑剔？在我开始研究可能的解决方案之前，我想至少对问题所在有一个基本的了解。

标签： androidjqueryiostwitter-bootstrap-3

解决方案

我在 ( Bootstrap-4 ) 的帮助下添加了两个示例作为您发布的说明。
1st - 在移动设备上打破文本框和下拉菜单。
第二 - 不破坏桌面和移动设备上的文本框和下拉菜单。

您可以查看以下代码段。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<div class="py-3">
  <div class="container l">
    <div class="row">
      <div class="col-md-12">
        <h5>Textbox & Dropdown (Break on Mobile Screen)</h5>
      </div>
      <div class="col-md-8 my-2">
        <div class="input-group">
          <div class="input-group-prepend">
            <span class="input-group-text" id="basic-addon3">Business Name</span>
          </div>
          <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3" placeholder="Enter a business name">
        </div>
      </div>
      <div class="col-md-4 my-2">
        <select class="custom-select">
          <option>Exact Match</option>
          <option>Option #1</option>
          <option>Option #2</option>
          <option>Option #3</option>
        </select>
      </div>
    </div>
    
    <br><br>

    <div class="row">
      <div class="col-md-12">
        <h5>Textbox & Dropdown (Not break on Desktop/Mobile Screen)</h5>
      </div>
      <div class="col-8 my-2 pr-1 pr-md-3">
        <div class="input-group">
          <div class="input-group-prepend">
            <span class="input-group-text" id="basic-addon3">Business Name</span>
          </div>
          <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3" placeholder="Enter a business name">
        </div>
      </div>
      <div class="col-4 my-2 pl-1 pl-md-3">
        <select class="custom-select">
          <option>Exact Match</option>
          <option>Option #1</option>
          <option>Option #2</option>
          <option>Option #3</option>
        </select>
      </div>
    </div>
  </div>
</div>

推荐阅读