html - 文本字段在某些设备上没有响应

Question

我有两个文本字段，它们在所有设备上都可以，但是当我试用 iPhone 5s/5 时，文本字段下降一行而不是留在同一行上。

我想要他们这样

add .code {
  display: inline-block;
  width: 100px;
  max-width: 300px;
}

<div class="add-content">
  <div>
    <ion-item class="code">
      <ion-input type="text" maxlength="4"></ion-input>
    </ion-item>a
    <span class="dash">-</span>
    <ion-item class="code">
      <ion-input type="text" maxlength="4"></ion-input>
    </ion-item>
    <input hidden #loseFocus>
  </div>
</div>
<div class="card">
</div>

Answer 1

不要使用 px 作为宽度，而是使用 em、% 或 VW， 这将使它响应。

示例:

add .code {               
  display: inline-block;                   
  width: 10%;                      
  max-width: 30%;                     
}

使用 px 它固定了元素的宽度，这就是它移动的原因。