适配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)
}

适配2K和4K分辨率相关推荐

2k和4k分辨率大小
随着硬件处理能力的提高,视频的分辨率也越来越高. 从已经得到广泛使用的 hd720:1280x720 hd1080:1920x1080 尺寸到更高的分辨率,我们可能会对一些术语搞不清楚,比如4k电视, ...
echarts-wordcloud在vue中适配2k，4k
在项目中 install 并在main.js文件中引入 echarts以及在你使用到echarts-wordcloud的vue组件中引入 (因为echarts-wordcloud是echarts的扩展 ...
4k显示器用html好还是dp,2K、4K显示器的高清线你造怎么选吗？
2K.4K显示器的高清线你造怎么选吗? 在现如今的桌面显示器中,1080p早已算不上卖点了,毕竟2k.4来的各种产品满大街都是,不少朋友趁着电脑升级的功夫,也想顺便想换台高清显示器,但不同的显示器配有 ...
分辨率1080P、2K、4K、8K的含义和区别
一.分辨率后缀的含义 'P' 720P,1080P等,表示的是"视频像素的总行数",比如,720P表示视频有720行的像素,而1080P则表示视频总共有1080行像素数,1080P ...
android 2k屏分辨率,2K、4K、8K分辨率屏幕有用吗？看看它们怎么说！
Retina Display(视网膜)是苹果最早提出来的概念.2010年,苹果iPhone 4将960×640的像素压缩到一个3.5英寸的显示屏内,使像素密度达到326像素/英寸(ppi),超越了人眼 ...
MEMC插帧技术及屏幕分辨率的各种别称：VGA、WVGA、QHD、UHD、360P、720P、2K、4K
Progressive Scan 逐行扫描常见的480P.720P.1080P这种命名方式,当中的P指的是逐行扫描,数字指的是垂直方向上的扫描行数. 1080P格式的视频,在单个扫描周期会进行108 ...
屏幕分辨率1K、2K、4K
什么是分辨率分辨率,又称解析度.解像度,可以细分为显示分辨率.图像分辨率.打印分辨率和扫描分辨率等.描述分辨率的单位有:dpi(点每英寸).lpi(线每英寸).ppi(像素每英寸)和PPD(PPPi ...
灰度图像和彩色图像是怎么来的？如何计算一张图片的大小？像素和分辨率分别是什么？它们之间有什么关系？我们平时所说显示器的1080p、2k和4k分别指的是什么？
文章目录前言一.什么是灰度图像和彩色图像? 1.1什么是像素? 1.2什么是分辨率? 1.3灰度图像和彩色图像? 1.4计算图片大小 1.5什么是压缩率? 二.显示器的1080p.2k和4k指的是 ...
Opencore-黑苹果：外接4K显示器却只能选择2K或以下分辨率
记一次黑苹果的坑配置如下: Motherboard Gigabyte z390 i aorus pro wifi (F8C) CPU: i7-9700 Memory: Asgard 16Gx1 St ...

适配2K和4K分辨率

适配2K和4K分辨率

适配2K和4K分辨率相关推荐

最新文章

热门文章