移动端兼容性问题记录

兼容性

  1. 仅在android版钉钉中嵌入的网页里，全屏api的调用会失效，所以点击视频无法默认将video元素全屏来进行播放

  2. 仅在ios版钉钉中嵌入的网页里，上传文件时，xhr.upload.onprogress不会触发

  3. video元素在ios上默认是调用原生的播放器全屏播放，而在android上则默认是在video元素中内联播放

  4. 在ios上为了让video能内联播放，需要在video元素上设置playsinline（ios10及之后系统版本的safari中有效）和webkit-playsinline（ios10之前的safari中有效）属性

  5. 隐藏系统默认的视频播放按钮

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    *::-webkit-media-controls-start-playback-button {
        display: none;
        -webkit-appearance: none;
    }
    *::-webkit-media-controls-panel {
     display: none;
        -webkit-appearance: none;
    }
    *::--webkit-media-controls-play-button {
        display: none;
        -webkit-appearance: none;
    }

  6. 钉钉中要改变网页标题，需要调用钉钉的api，引用dingtalk-jsapi/api/biz/navigation/setTitle

  7. 在ios下的网页中，input输入框内的内容溢出输入框的宽度时，无法通过移动光标来查看超出部分的内容，不管这个输入框是否只读。因为在移动光标时，输入框中显示的内容不会随着改变

分享到