安卓、IOS兼容性

安卓、IOS兼容性

1、IOS下input默认样式(圆角、阴影)

解决方案

input {
  -webkit-appearance: none;
  border-radius: 0;
  border: 1px #ccc solid;
}

2、在IOS下页面滑动卡顿，Android没问题

解决方案

body {-webkit-overflow-scrolling:touch; overflow-scrolling: touch;}

3、input type 改为button

问题
当input type为button，disabled为true，会出现背景色异常(其实就是禁用的样式)
解决方案

• 把input的disabled改为readonly
• opacity：1

4、input type=text切换到英文输入法IOS下的问题

解决方案
input添加autocapitalize属性

<input class="SmallFour" type="text" autocapitalize="off" />

5、禁止数字自动识别为电话号码

这个比较有用，因为一串数字在iphone的部分浏览器上会显示成蓝色，样式加成别的颜色也是不生效的。亲测，在微信内部浏览器没问题，但是在safari上有问题，IOS系统版本12.1.4

解决方案

<meta name="format-detection" content="telephone=no" />

6、input type=number之后，pc端出现上下箭头

解决方案

input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0;
}

7、input type=number之后，pc端出现上下箭头

解决方案

input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0;
}