vue等比例缩放页面用于网站,官网
1、目前设置的限制屏幕在1000-1770像素等比例缩放
onMounted(() => {
window.addEventListener("resize", bodyScale, false);
})
const bodyScale = () => {
const deviceWidth = document.documentElement.clientWidth; // 获取当前分辨率下的可是区域宽度
// 检查设备宽度是否在 1000 到 1770 之间
if (deviceWidth > 1000 && deviceWidth < 1770) {
const scale = deviceWidth / 1920; // 设计稿的尺寸为 1920
document.documentElement.style.zoom = scale; // 根据比例放大或缩小
} else {
document.documentElement.style.zoom = 1; // 恢复默认缩放比例
}
}
onUnmounted(() => {
window.removeEventListener("resize", bodyScale, false); // 在组件销毁时移除监听器
});