页面自动适配手机电脑设备缩放

问题：

页面css非按百分比，设置了固定px宽度、高度，如何快速、方便，让页面按手机设备自动设配页面缩放？

通常几种方法：

1、mata viewport

2、flex布局

3、rem

这里主要记录一下meta viewport方案

Viewport 基础

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, viewport-fit=contain">

• width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）
• initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例
• maximum-scale：允许用户缩放到的最大比例
• minimum-scale：允许用户缩放到的最小比例
• user-scalable：用户是否可以手动缩放

    // 设计稿方案
    const viewportWidth = 1920; 
    const clientWidth = document.documentElement.clientWidth;
    const viewport = document.querySelector('meta[name="viewport"]');
    // 计算缩放比
    const viewportScale = clientWidth / viewportWidth;
    viewport.setAttribute('content', 'width=' + viewportWidth + ', initial-scale=' + viewportScale + ', minimum-scale=' + viewportScale + ', maximum-scale=' + viewportScale + ', user-scalable=0');
  
    if (document.addEventListener) {
      const resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'  
      console.log("resizeEvt",resizeEvt)
      window.addEventListener(resizeEvt, setRem, false)
      document.addEventListener('DOMContentLoaded', setRem, false)
    }