移动端兼容性问题

1、meta viewport

  const descriptionMeta: any = document.querySelector('meta[name="viewport"]');
  descriptionMeta.setAttribute(
    'content',
    'width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no',
  );

2、模拟100vh

  const vhCheck = () => {
    // 模拟 vh
    const vh = window.innerHeight * 0.01;
    // 设置 css 自定义属性
    document.documentElement.style.setProperty('--vh', `${vh}px`);
  };

3、rem

function setRootFontSize() {
    document.documentElement.style.fontSize = document.documentElement.clientWidth / 3.75 + 'px';
}

4、scroll chaining

  // 解决滚动穿透问题
  const fixedBody = () => {
    const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    document.body.style.cssText += 'position:fixed;width:100%;top:-' + scrollTop + 'px;';
  };
  const looseBody = () => {
    const body = document.body;
    body.style.position = '';
    const top = body.style.top;
    document.body.scrollTop = document.documentElement.scrollTop = -parseInt(top);
    body.style.top = '';
  };