移动端兼容性记录

[wangweida]

1. ios中new Date中的日期字符串不能用-只能用/连接，比如new Date('2018/01/01')

2. ios中软键盘顶起页面导致布局变形在blur事件中加入window.scroll(0, 0)

3. ios中引入fastclick在某些页面中只有第一屏的点击事件才生效（至今没有找到原因），把整个页面包在一个高度100%的div内，使用div内的滚动条可解决。

4. 移动端熄后定时器不执行

// 假设倒计时30s
let initialTimeStamp = null;
let timer = null;
const initialCountdownTime = 30;
let countdownTime = initialCountdownTime;

function onCountdown() {
  // 开始倒计时后记录一个时间戳
  if (!initialTimeStamp) initialTimeStamp = Date.now();
  clearTimeout(timer);
  if (countdownTime > 0) {
    // 计算剩余时间
    const result = initialCountdownTime - Math.round((Date.now() - initialTimeStamp) / 1000);
    // 防止熄屏时间太长出现负数的情况
    countdownTime = result >= 0 ? result : 0;
    console.log(countdownTime);
    timer = setTimeout(onCountdown, 1000);
  } else {
    initialTimeStamp = null;
  }
}
onCountdown();

5. 1px边框

.border-1px-x {
  position: relative;
  &:after {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    border-bottom: 1px solid #ededed;
    content: ' ';
    @media (-webkit-device-pixel-ratio: 1.5), (device-pixel-ratio: 1.5) {
      transform-origin: top;
      transform: scaleY(0.7);
    }
    @media (-webkit-device-pixel-ratio: 2), (device-pixel-ratio: 2) {
      transform-origin: top;
      transform: scaleY(0.5);
    }
    @media (-webkit-device-pixel-ratio: 3), (device-pixel-ratio: 3) {
      transform-origin: top;
      transform: scaleY(0.33);
    }
  }
}

6. 高清图

.bg-image(@url) {
  background-image: ~"url('@{url}@2x.png')";
  background-size: 100% 100% !important;
  @media (-webkit-device-pixel-ratio: 3), (device-pixel-ratio: 3) {
    background-image: ~"url('@{url}@3x.png')";
    background-size: 100% 100% !important;
  }
}

7. iphoneX底部兼容

.safe-bottom {
  @supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }
}

8. 安卓端输入框被软键盘挡住

el.scrollIntoViewIfNeed()