适配2K和4K分辨率

news/2024/12/22 11:04:01/

适配2K和4K分辨率

本方法适用于项目已经在1920*1080分辨率的布局下定型的情况,在适应不同分辨率
1.在utils文件夹下创建一个detectZoom.js文件

export const detectZoom = () => {let ratio = 0,screen = window.screen,ua = navigator.userAgent.toLowerCase();if (window.devicePixelRatio !== undefined) {ratio = window.devicePixelRatio;} else if (~ua.indexOf('msie')) {if (screen.deviceXDPI && screen.logicalXDPI) {ratio = screen.deviceXDPI / screen.logicalXDPI;}} else if (window.outerWidth !== undefined &&window.innerWidth !== undefined) {ratio = window.outerWidth / window.innerWidth;}if (ratio) {ratio = Math.round(ratio * 100);}return ratio;
};

2.在main.js中引用
根据 乘和除document.body.style.zoom = 100 / (Number(m) / n)中的n来适应不同分辨率
document.body.style.zoom = 100 / (Number(m) / 2)适用于38402160,而document.body.style.zoom = 100 / (Number(m) / 1.33)适用于25601440,其余分辨率均可以根据n的值不同而设置。

import { detectZoom } from '@/utils/detectZoom.js';
const m = detectZoom()
if (window.screen.width * window.devicePixelRatio >= 3840) {document.body.style.zoom = 100 / (Number(m) / 2)
} else if (window.screen.width * window.devicePixelRatio >= 2560 && window.screen.width * window.devicePixelRatio <= 3840) {document.body.style.zoom = 100 / (Number(m) / 1.33)
} else {document.body.style.zoom = 100 / Number(m)
}

http://www.ppmy.cn/news/215338.html

相关文章

电脑壁纸2K+Win10实用快捷键

电脑壁纸2KWin10实用快捷键 适用于&#xff1a;2K屏幕&#xff0c;1920*1080屏幕 PS&#xff1a; 壁纸会持续更新&#xff0c;可定期前往网盘查看最新壁纸。 如果你有好的壁纸&#xff0c;也可以联系我&#xff0c;分享给更多的朋友。 仅展示部分&#xff0c;原图获取见文末…

壁纸wallpaper透视壁纸王者荣耀透视壁纸mpkg

每天请记得打开手机&#xff0c;查收我的礼物 小贴士&#xff1a;长按保存 点击放大 点击【星尘库】右上角找到【…】 关注设我为✨星标/置顶 ✨【更快收到更新】 Pay attention to setting me as a star/topping [receive updates faster] 希望你可以留下 【 再看】 。 …

修复华硕键盘背光灯

笔记本键盘背光灯不知道什么时候坏掉了。 今天在家想修复一下笔记本的摄像头&#xff0c;在ASUS官网看驱动信息的时候发现可以通过更新ATK驱动修复键盘背光灯。 下载了华硕官网提供的‘ATK [快捷键驱动程序]’ 先在控制面板卸载旧的ATK&#xff0c;再把新的安装上就又点亮了键盘…

关于华硕飞行堡垒8开机黑屏,但键盘,电源指示灯亮

问了客服后&#xff0c;他给了我一个主板驱动&#xff0c;需要的https://share.weiyun.com/zPSb5l6Q自取

ikbc f108键盘灯光设置

fn ScrLK调整灯光模式 fn 左右键 调整灯光传播速度

win10开启键盘灯的步骤

win10系统&#xff0c;联想拯救者&#xff0c;有时我们需要在昏暗的条件下开灯。 快捷键Fn空格&#xff08;space&#xff09;fn&#xff1a;function n 大家可以试一试。

华硕天选如何改变屏幕亮度,以及键盘灯的效果

改变屏幕亮度的模式改变键盘灯的颜色以及键盘灯的效果展示选择