ios手机上 使用原生input出现的问题

发布时间 2023-03-29 11:26:45作者: 飞奔的程序员

 

 

 1、input textarea有阴影

// 兼容性样式:苹果手机input输入框和textarea 都会有阴影。并且聚焦的时候会放大
  input,
  textarea {
    -webkit-appearance: none; //去掉input 在iOS中的默认圆角和内阴影
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); //去掉点击时高亮的样式
  }

2、input type为 radio时,宽高设置成0后还会有个小点

.radio-box input[type="radio"] {
  width: 0;
  height: 0;
  // ios手机上会有一个小黑点,用颜色试试去掉黑点
  color: #fff;
  border-color: #fff;
}

3、input  textarea 输入框聚焦后,被放大(原因是ios手机 会把字号放到 16px,我这边的需求时14px )

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"></meta>