为什么Select2在iOS设备上运行不正常？

Question

我正在使用select2Pixels Admin Template中的库.我注意到它在桌面和Android设备上运行良好.但是,在iOS设备上查看时,下拉列表无法打开.我不知道为什么会这样.

$(document).ready(function() {
  var init = [];

  init.push(function() {
    var $select2 = $("#Salutation,#Gender").select2();
    $select2.on('select2:select select2:unselect', () => {
      $(":focus").blur();
    });
  })

  window.PixelAdmin.start(init);
});

body .select2-container.select2-container--default.select2-container--open {
  top: 305px!important;
  left: 22px!important;
}

.select2.select2-container.select2-container--default.select2-container--below.select2-container--open {
  top: auto!important;
}

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Select2</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="pixel-admin.min.js"></script>
<link rel="stylesheet" href="pixel-admin.min.css">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.4.5/select2.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.4.5/select2.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-xs-4 col-xs-offset-4">
      <h3>Application Form</h3>
      <form class="form" action="/action_page.php">
        <div class="form-group">
          <label for="GivenName">Given Name:</label>
          <input class="form-control" type="text" id="GivenName">
        </div>
        <div class="form-group">
          <label for="Surname">Surname:</label>
          <input class="form-control" type="text" id="Surname">
        </div>
        <div class="form-group">
          <label for="Salutation">Salutation:</label>
          <select class="form-control" name="" id="Salutation">
            <option value="Mrs">Mrs</option>
            <option value="Mr">Mr</option>
            <option value="Miss">Miss</option>
          </select>
        </div>
        <div class="form-group">
          <label for="Gender">Gender:</label>
          <select class="form-control" name="" id="Gender">
            <option value="Female">Female</option>
            <option value="Male">Male</option>
            <option value="Transgender">Transgender</option>
          </select>
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
    </div>
  </div>
</div>

我在这里为你添加了pixel-admin js .

注意当我在iOS设备上使用"请求桌面版网站"功能时,它可以正

有什么建议吗？请帮助我.谢谢

Answer 1

我已经为您完成了两页，第一页包含下拉菜单，该菜单将在移动和桌面浏览器上保持相同的视图和相同的功能。请通过手机浏览器打开，

点这里观看...

对于第二页，我调整了代码，下拉列表现在应该与像素和 select2 库一起工作，在移动/桌面浏览器上也保持相同的视图，

您将能够在移动浏览器上使用它们，方法是双击每个下拉菜单将其打开并选择一个值，我已将其留给您，这样您就可以根据 onclick 事件更改它，它会在选择时隐藏菜单桌面或手机浏览器。

// show/hide the menu when examples is clicked
$(".dropdown-toggle").on("click", function () {
$(".dropdown-menu").toggle();
});

// 用于导航

$("#nav").on("click", "li", function () {
$("#menu-icon").click();
document.getElementById("flag").focus();
//$("#nav").slideToggle();
}); 

对于移动浏览器，您可以使用以下命令来隐藏菜单

$(document).on('点击touchstart', function () {}

请检查链接并查找使用的资源/文件

点这里观看 ...

剩下的工作应该是 CSS 和样式代码，您可以根据需要进行控制，因为我认为在不考虑您的意见的情况下调整字段是毫无意义的。

至于解释我如何完成这个任务，实际上，我必须限制java脚本加载的方式，此外我已经编辑了几乎所有的js库并在j查询回退期间通过脚本JS加载它们。

以下是实现此目标的步骤：

第一的 ：

通过后备加载 j​​query 库

第二 ：

加载 admin-pixel.js 加载 your-pixel.css

第三步：

加载 select2.js 加载 select2.css

它们必须按顺序加载，最后加载上述代码后，您必须编写此代码，以便下拉菜单视图在移动浏览器上不会更改，并且它将保持与桌面浏览器相同的功能，加载后将它们放在脚本标签上首先J查询然后加载select 2库

$('select').select2({
minimumResultsForSearch: -1
});

最后步骤：

你必须在你的 html 页面上写这些元标签和 css

<meta HTTP-EQUIV="MSThemeCompatible" content="Yes" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<meta id="viewport" name="viewport" content="width=device-width,initial- 
scale=1.0,user-scalable=no">

CSS 代码将其放在“”标签上：

html {
touch-action: manipulation;
}

根据您的要求，任务已完成，您可以浏览所有文件上的代码，看看 js 库如何按顺序加载，您可以下载所有资源以及 html 页面

通过此链接，

您的替代解决方案是，远离您的图书馆，您可以创建下拉列表字段，它们在移动浏览器上运行没有问题，然后在有问题的页面上使用它们，并且在用户在这些工作下拉列表字段上进行选择时， trans-fare / 将值移动到属于 select2 的损坏的值（通过 java 脚本执行此操作，并使用 display:none 隐藏损坏的下拉菜单；

这样做可能看起来很愚蠢，但这比在开发您正在使用的已折旧库时遇到的所有这些错误要快得多......

如果您遇到任何问题，请告诉我，因为我无法在您的生产服务器上执行测试。我最终将编辑我的答案以调整我的答案。

祝你好运