iphone上的输入方式与PC/Android设备不同

Question

使用输入元素时存在兼容性问题。

数字超出了iphone输入框的范围

但在安卓/PC上是正常的

样式如下

html * {
  font-size: 36px !important;
  color: #0 !important;
  font-family: Arial !important;
  box-sizing: border-box;
}

.common-flex {
  display: -webkit-flexbox;
  display: -webkit-box;/* android 2.1-3.0, ios 3.2-4.3 */
  display: -webkit-flex;/* Chrome 21+ */
  display: -ms-flexbox;/* WP IE 10 */
  display:flex;/* android 4.4 */
}

.common-flex-spacebetween {
  -webkit-box-pack: justify;/* android 2.1-3.0, ios 3.2-4.3 */
  -webkit-justify-content: space-between;/* Chrome 21+ */
  -ms-flex-pack: justify;/* WP IE 10 */
  justify-content: space-between;/* android 4.4 */
}

<div class="common-flex common-flex-spacebetween" style="margin: 30px 0px 0px 0px; padding:0px;" >
  <input name="yy" type="num" id="yy" style="width:110px; text-align:center;" aria-label="year"/>
  <label id="xx1" style="float: center;">/</label>
  <input name="mon" type="num" id="mon" style="width:60px; text-align:center;" aria-label="month"/>
  <label id="xx2" style="float: center;">/</label>
  <input name="dd" type="num" id="dd" style="width:60px; text-align:center;" aria-label="day"/>
</div>

如何修复 iphone 上的输入样式？ 谢谢：D

Answer 1

hi king5201 我认为您可以使用媒体查询来设置手机样式，因为您网站中的媒体查询样式可以进行响应式设计