我有一个非常基本的搜索页面,有下拉列表和文本框。
代码片段如下
<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>
我使用bootstrap 3.3.5和jQuery 2.1.4。
当我使用Chrome作为浏览器时,它在桌面、android平板电脑和android手机上运行得非常好。
然而,当我尝试在新版iPhone ios浏览器上查看时,文本框和下拉框都会完全崩溃(崩溃为完全不可用)。
有趣的是,当我试图在Chrome中模仿iPhone X时,它也运行得很好。
我对整个ios主题都是全新的。做一些基础研究使我相信旧版本的bootstrap/jquery可能是问题所在。
尝试更新到bootstrap 4,这也导致将jquery更新到3.0.0,完全破坏了整个应用程序,所以我不得不将其还原回来。
在我深入讨论整个bootstrap/jquery之前,有谁能给我提供一些有用的提示,告诉我为什么ios如此挑剔?在我开始研究可能的解决方案之前,我想至少对问题有一个基本的了解。