可视化大屏适配方案

rem.js

JAVASCRIPT
/**
 * Created by Joubn on 2023/3/2.
 */
 !function (window) {

  const docWidth = 1920;
  const docHeight = 810;

  let containerW
  let containerH
  const doc = window.document,
    docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';

    window.recalc = (function refreshRem() {
    const clientWidth = docEl.getBoundingClientRect().width;
    const clientHeight = docEl.getBoundingClientRect().height;

    const rateW = (docWidth / docHeight) / (clientWidth / clientHeight)
    const rateH = clientWidth / docWidth
    
    // 这里可以设置某些不需要缩放的元素(如：地图)
    const container = document.querySelector('#container')
    
    if ((clientWidth / clientHeight) > (docWidth / docHeight)) {
      document.querySelector('body').style = `transform:scale(${rateW * rateH}) translateX(-50%);position: absolute; left:50%;transform-origin:0 0; overflow:hidden`
    
      if(container){
        if(!containerW){
          containerW = container.offsetWidth
        }
        container.style = `transform:scale(${1/(rateW * rateH)}) translate(-50%,-50%);transform-origin:0 0;left: 50%;`
      }
    } else {
      document.querySelector('body').style = `transform:scale(${rateH}) translateY(-50%);position: absolute; top:50%;transform-origin:0 0;overflow:hidden`
      if(container){
        if(!containerH){
          containerH = container.offsetHeight
        }
        container.style = `transform:scale(${1/rateH}) translate(-50%,-50%);transform-origin:0 0;top: 50%;`
      }
    }
    /* 8.55：小于320px不再缩小，11.2：大于420px不再放大 */
    //docEl.style.fontSize = Math.max(Math.min(20 * (clientWidth / docWidth), 11.2), 8.55) * 5 + 'px';
    // docEl.style.fontSize = 20 * (clientWidth / docWidth) * 5 + 'px';
    docEl.style.fontSize = 100 + 'px';

    return refreshRem;
  })();

  /* 添加倍屏标识，安卓倍屏为1 */
  docEl.setAttribute('data-dpr', window.navigator.appVersion.match(/iphone/gi) ? window.devicePixelRatio : 1);

  if (/iP(hone|od|ad)/.test(window.navigator.userAgent)) {
    /* 添加IOS标识 */
    doc.documentElement.classList.add('ios');
    /* IOS8以上给html添加hairline样式，以便特殊处理 */
    if (parseInt(window.navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/)[1], 10) >= 8)
      doc.documentElement.classList.add('hairline');
  }

  if (!doc.addEventListener) return;
  window.addEventListener(resizeEvt, window.recalc, false);
  doc.addEventListener('DOMContentLoaded', window.recalc, false);

}(window);