iPhone数字键盘扭曲HTML页面的页面宽度

iPhone numeric keypad distorts page width of HTML page

提问人：David Shearan 提问时间：8/12/2023 最后编辑：Chris BarrDavid Shearan 更新时间：8/13/2023 访问量：40

问：

我正在开发一个PHP脚本，用于将蝴蝶/飞蛾记录提交到网站。该网站使用 Bootstrap 模板。页面的一部分是每行两个字段的表格列表，一个要求蝴蝶/飞蛾的通用名称，另一个要求计数（看到的数字）。当我使用 iPhone 点击其中一个 Count 字段时，会出现数字键盘，但当它出现时，它会扭曲页面。它稍微拉伸它并将显示向左移动。当我点击下一个物种字段时，它会将页面向右移动，但宽度仍然被拉伸，因此过去适合页面宽度的文本不再如此。

这是我的代码的一个大大简化的版本，它仍然遇到完全相同的问题

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    
<div class="container">
  <form>
    <div class="form-row">
      <div class="form-group col-7 autocomplete">
        <input type="text"
                class="form-control"
                id="CommonName" 
                name="species">
        </div>
        <div class="col-2">
          <input type="number" 
              class="form-control"
              inputmode="numeric"
              id="Count"  
              name="count"  
              min="0">
        </div>
      </div>
    </form>
  </div>
<div>

我已经尝试了每个字段使用的列数，但没有成功

HTML CSS 苹果手机

评论

0赞 imvain2 8/12/2023
欢迎来到 SO。我建议阅读最少的可重复示例和如何提问。并考虑发布最少生成的代码而不是 PHP
0赞 Chris Barr 8/12/2023
导致此问题的原因与PHP无关，因为它在服务器上。当您编辑问题时，使用工具栏中的按钮制作一个代码片段，以便我们可以拥有一些可以运行和重现此问题的代码[<>]
0赞 David Shearan 8/12/2023
谢谢@ChrisBarr - 我已经编辑了我的问题并添加了更大的代码片段。如果您需要查看任何包含，请告诉我
0赞 Chris Barr 8/13/2023
我们需要看到足够多的东西才能重现您遇到的问题。仅仅那一点 HTML 本身并不能真正证明您的问题。我已经编辑了您的问题以包含一个片段，该片段现在链接到引导 CSS，因此我们可以实际运行此代码。现在您需要做的是运行它，看看这是否重现了您描述的问题。如果您需要编辑该代码，请在编辑问题时向下滚动蓝色按钮下方，然后单击“编辑上述代码段”的链接，然后在其中进行更改。

答： 暂无答案

上一个：无法吐出 iphone 中键盘正确建议的 otp

下一个：如何在 iPhone 上使用 VoiceOver 制作一组&lt;div&gt;？