ios兼容性问题

Posted 2020-11-02 BGweizheng

ios常见兼容性问题

1.使用禁止选中文字属性

        input {
            -webkit-user-select: none;
            -moz-user-select: none;
            -khtml-user-select: none;
            user-select: none;
        }
    这种写法ios的input框会出现失能的问题(无法输入内容),需要再给它添加另一属性
        input {
            -webkit-user-select: auto;
        }
    

2.表单的input事件和change事件

ios11之后,有些情况使用input事件ios自带的输入法,当选择拼音输入时会自动输入多个字符,这是因为有时ios对input事件不兼容导致的,使用change事件即可解决这个问题

ios收起输入法时会失去焦点,触发change事件,但是android收起输入法时并不会失去焦点,所以可以通过判断UA的方式来针对不同系统使用不同的事件

3.line-height height 的兼容

对于一般PC浏览器以及iOS设备的浏览器表现就是我们想要的居中效果，但是大部分 Android 设备的浏览器文字都会稍微向上偏离，

测试表明，字体字号为奇数的两倍时（比如 10px、14px、18px、22px、26px），会出现严重偏移现象。 其实系统之间效果的差异跟我们的字体类型、系统排版引擎、浏览器都有关系，其实不影响用户浏览与操作等体验，我们可以忽略这些问题，对于一些居于使用场景偏离的比较明显的，可以使用下面提到的两种处理方案。 方案一： 我们可以通过 transform: scale 来处理，比如，字体大小是 8px，我们把字体设定为 16px，然后通过 scale(0.5) 缩放至一倍大小，简单粗暴。 注意：放大两倍会使得容器被撑开占位。 方案二： 结合行高、对齐的关系，结合伪元素得出的黑科技，亲测效果很理想。

        .jd::before {
        content: ‘‘;
        display: inline-block;
        vertical-align: middle;
        width: 0;
        height: 100%;
        margin-top: 1px;
    }