H5前端IOS爬坑(一)

在进行前端的编写过程中,会遇到各种各样的神奇的适配问题,有的IOS没问题,Android却有问题; 有的却正好相反,本文就记录了一种在IOS上才有的坑。

场景说明

普通H5界面的input框, 如果设置了disable属性。在 IOS 和 Android 上的颜色是不一致的。

场景示例

  • IOS 示例
    image

  • Android 示例
    image

  • 明显发现 IOS 的文字内容比 Android 的文字内容颜色浅

问题原因

苹果的显示器 input disabled 会有默认样式的属性,需要单独设定苹果的样式

解决方案

1
2
3
4
5
input:disabled {
color: #aaa;
opacity: 1;
-webkit-text-fill-color: #aaa;
}
咸鱼也要有梦想,万一实现了呢
0%