Jerenyaoyelu/meplay

【实战经验】移动端兼容性问题整理

Jerenyaoyelu opened this issue · 0 comments

Jerenyaoyelu commented
  1. ios video不支持预加载，canplay/canplaythrough等事件回调不会触发，只有用户交互后才会开始加载视频
  2. 微信浏览器audio/video无法自动播放，需要用户交互
    a. 解决方法：document监听任何用户的首次点击开启，开启完毕之后关掉监听器
  3. video标签需要添加以下属性：
    x5-playsinline="true"、playsInline、x5-video-player="true"
  4. 同时设置overflow-y:auto和overflow-x:hidden， 或者overflow:auto和overflow-x:hidden，在安卓机上会出现无法滚动的情况
    a. 解决方法：去掉overflow-x:hidden
  5. 横竖屏监测
  • 方案1: orientation: 180/0 表示竖屏
    问题：部分安卓机型180/0 不是竖屏
  • 方案2: window.matchMedia('(orientation: portrait)')
  • 不能在orientationchange事件中求值，由于执行顺序原因会取得旋转之前的值，需要使用返回值match，监听其change事件
  • 返回值在低核浏览器下不一定有addEventListener方法，需要用addListener替换，向下兼容
  1. pc端font-size最小为12px，移动端为8px
  2. 原生input封装的进度条组件会出现在安卓机无法拖动的问题
    a. 解决方法：在样式中添加transform: rotate(360deg)可以解决，(发生和解决)原因暂时不明
  3. rem方案可以解决部分适配问题，但不能解决所有适配问题
    a. 注意不能无限制（大/小）的设置html字号，否则在某些场景下会导致适配问题，如下：
    ⅰ. 唤出键盘，把页面推上去之后，由于视窗尺寸变化导致字号变得很小，使页面样式被挤压变形
    ⅱ. 某些场景，如安卓微信浏览器，上面白色边栏占了一大块，可视空间变小，加上横竖屏切换等复杂场景，可能会出现部分元素过大使得其他元素被挤下去看不到
    b. 最佳实践：应该根据具体页面设计，配合合理的布局和100%或者calc(100% - 固定大小(px/rem))等，进行自适应页面开发
  4. 监测设备是否为折叠屏或类折叠屏的时候最要综合判断宽高比例和最小宽度，目前的最佳实践是：
function isFold() {
    // chrome移动端模式下，三星折叠屏机型（512X717），快速切换横竖屏N次
    // 会出现clientWidth和clientHeight变成497X695，原因位置
    // 故调整下面的判断：min > 450
    const w = document.documentElement.clientWidth;
    const h = document.documentElement.clientHeight;
    const min = Math.min(w, h);
    const max = Math.max(w, h);
    return min / max > 0.65 && min > 450;
  }
  1. 自适应页面布局方案使用%应该减少避免出现使用非100%设置宽高/margin等的场景，否则会出现比较大的布局适配问题
  2. 类似如下布局：
    image

布局方案1: A使用正常文档流，B高度使用calc(100% - Height(A));
问题：calc在低版本浏览器可能会有兼容性问题，但整体改方案运行应该没毛病
布局方案2: A使用absolute绝对定位，B高度固定，AB共同父节点使用padding-top: Height(A);
问题：高度较小屏幕，AB会出现重叠，限于不同场景，可能会导致部分内容被遮挡
布局方案3: A使用absolute绝对定位，B高度固定，配合使用margin-top: Height(A);
问题：同方案2
布局方案4: A使用absolute绝对定位，B高度100%，配合使用padding-top: Height(A);
最佳实践：B完美丝滑自适应，也不会出现内容遮挡重叠