1.index.html

 <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,
    user-scalable=no">

2.main.js

// rem 適配
var falses = true;
//----------------------------------
const setHtmlFontSize = () => {
  const htmlDom = document.getElementsByTagName('html')[0];
  let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
  if (htmlWidth > 413 && htmlWidth<735) {
    htmlWidth = 414;
    console.log( htmlWidth);
    htmlDom.style.fontSize = `${htmlWidth / 16}px`;
  }
  //小米8適配
  if (htmlWidth == 393 ) {
    htmlWidth = 393;
    console.log( htmlWidth);
    htmlDom.style.fontSize = `${htmlWidth / 16}px`;
  }

  if (htmlWidth <= 375) {
    htmlWidth = 375;
    htmlDom.style.fontSize = `${htmlWidth / 16}px`;
  }
  if (htmlWidth > 1000) {
    falses =false

  }

};
if (falses){
window.onresize = setHtmlFontSize;
setHtmlFontSize();

}
 

3. 檢視當期機型螢幕尺寸

            const screenWidth = document.body.clientWidth
            const screenHeight = document.body.clientHeight
            alert(`當前裝置的螢幕尺寸（寬 x 高）：${screenWidth} x ${screenHeight}`)

4.手機檢視vue專案

vue.config.js

 devServer: {
        host: '111.11.11.11', // ip
        port: 8081, // 設定埠號
        https: false, // https:{type:Boolean}
        open: false, //配置自動啟動瀏覽器
        proxy: null  //設定代理
    },