Primero, el tamaño de la pantalla es fijo, no se permite el escalado.
Según el borrador del diseño.
Agregue js a la página index.html en vue para establecer la relación de pantalla en un valor fijo de 1920px*1080px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
<script>
window.onload = function () {
var ratioY = window.innerHeight / 1080;
var ratioX = window.innerWidth / 1920;
var ratio = ratioY > ratioX ? ratioX : ratioY;
document.body.style.transform = "scale(" + ratio + ")";
window.onresize = () => {
var ratioY = window.innerHeight / 1080;
var ratioX = window.innerWidth / 1920;
var ratio = ratioY > ratioX ? ratioX : ratioY;
document.body.style.transform = "scale(" + ratio + ")"
};
}
</script>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>En segundo lugar, CSS establece un ancho y alto fijos.
base.css
html {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
html,
body {
padding: 0;
margin: 0;
border: 0;
}
body {
min-width: 1920px !important;
min-height: 1080px !important;
max-width: 1920px !important;
max-height: 1080px !important;
}
#app {
background: #000c15;
}