如果有人构建一个全屏应用程序,比如说 1920x1080,并希望完全适合较小的屏幕 - 例如 1366x768。这就是我在 Vue.js 中所做的 - 但可以使用纯 js 和 css 来完成 - 基于上面的答案 - 主要的重要性是我专门设置了原始宽度和高度,否则它对我不起作用:
App.vue(如果 localStorage 中存在 lowres,则为条件类)
<template>
<div id="external-app-wrapper" :class="{lowres: isLowRes}">
<div id="internal-app-wrapper">
<router-view />
</div>
</div>
</template>
computed: {
isLowRes() {
return localStorage.getItem('lowres') !== null
}
}
比例计算为:1366/1920 和 786/1080
#external-app-wrapper {
width: 1920px;
height: 1080px;
}
.lowres #internal-app-wrapper {
transform-origin: top left;
transform: scale(0.71145833333, 0.71111111111);
}
router.js(分辨率是可选的)
{
path: '/app/:resolution?',
name: 'App Home',
component: () => import('@/components/routes/HomeRoute'),
meta: {
title: 'App Home'
}
}
在 HomeRoute.vue 我有:
mounted() {
if (this.$route.params.resolution === 'lowres') {
localStorage.setItem('lowres', 'true')
this.$router.push({ path: '/app' })
this.$router.go()
} else if (this.$route.params.resolution === 'highres') {
localStorage.removeItem('lowres')
this.$router.push({ path: '/app' })
this.$router.go()
}
}
所以导航到/app/lowres
重定向到/app
并缩小整个应用程序并重定向到/app/highres
重定向到/app
并且解析恢复正常
希望有人觉得它有用:)