本项目的需求是 PC 端：

• 小于 1440px 的屏幕下，最小宽度 1100px（包含左右 50px 的内边距）
• 1440px 到 1679px 之间，最小宽度 1200px（包含左右 50px 的内边距）
• 大于 1679px，最小宽度 1300px（包含左右 50px 的内边距） 移动端：最小宽度 1100px（包含左右 50px 的内边距），自动缩放宽度为屏幕宽度

PC 端网页适配到移动端这里卡了一下，用到了两个方案，最后选择了方案二。 ps：

// 判断是否是移动设备
function isMobile() {
    let flag =
        /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
            navigator.userAgent
        )
    return flag
}

1.在 main.js 设置 html 和 body 的最小宽度是 1100px，同时获取屏幕宽度，然后缩放 html，缩放比例为屏幕宽度/1100

这种方案的缺点是，在手机上划到页面底部后，下方有大量空白，可能是由缩放导致的。

第二个方案是采用 meta 视口 viewport 方式。

设置

<meta
    name="viewport"
    content="width=device-width,intial-scale=0,maximum-scale=1.0,user-scalable=yes,shrink-to-fit=no"
/>

vite 默认的是<meta name="viewport" content="width=device-width, initial-scale=1.0" />

这里需要深究一下，为什么默认的不能做到缩放到移动端屏幕 关于 html 中 viewport 和 initial-scale 以及 device-width 的理解 (opens new window)