说明

公司项目做之前没有沟通好，按照1920*1080设计图做的页面，缩放比是100%，项目做完之后说要适配缩放比，并且适配4k屏，然后就各种百度找办法。

一、首先是适配屏幕的缩放比

这种方法也是通过看别人发布的文章解决的，原来的地址在这：前端解决笔记本屏幕显示缩放比例125% 150%对页面布局的影响
我是用的第二种方法，直接就粘过来了。

1.在外部创建一个detectZoom.js文件，我是在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中引用

m是获取的当前屏幕的缩放比，在通过zoom属性对应缩放。
zoom属性用于设置或检索对象的缩放比例。

import { detectZoom } from '@/utils/detectZoom.js';
const m = detectZoom();
document.body.style.zoom = 100 / Number(m);

以上为解决屏幕缩放比的方法，在屏幕分辨率为1920*1080时可以解决。

二、解决4k屏幕的问题

在项目做完之后突然告知需要适配4k屏，并且4k屏的时候也会有屏幕缩放比，不想重新改页面样式就想了这个办法。也是通过zoom属性，原理就是通过整个body的缩放使系统的展示区域变成1920*1080

1.获取当前屏幕的分辨率

获取屏幕的宽：window.screen.width * window.devicePixelRatio
获取屏幕的高：window.screen.height * window.devicePixelRatio

2.根据不同屏幕和缩放比来调节zoom的比例

在main.js中代码如下：

import { detectZoom } from '@/utils/detectZoom.js';const m = detectZoom();//判断屏幕是否为4k
if (window.screen.width * window.devicePixelRatio >=3840) {// switch (m) {//   // 4k屏时屏幕缩放比为100%//   case 100://     document.body.style.zoom = 100 / 50;//     break;//     // 4k屏时屏幕缩放比为125%//   case 125://     document.body.style.zoom = 100 / 62.5;//     break;//     // 4k屏时屏幕缩放比为150%//   case 150://     document.body.style.zoom = 100 / 75;//     break;//     // 4k屏时屏幕缩放比为175%//   case 175://     document.body.style.zoom = 100 / 87.4715;//     break;//     // 4k屏时屏幕缩放比为200%//   case 200://     document.body.style.zoom = 100 / 100;//     break;//     // 4k屏时屏幕缩放比为225%//   case 225://     document.body.style.zoom = 100 / 112.485;//     break;//   default://     break;// }document.body.style.zoom = 100 / (Number(m)/2);
}else{document.body.style.zoom = 100 / Number(m);
}

最后结果：虽然屏是4k的，但是系统展示页面的可视区域依旧是1920*1080的，页面样式也没有乱。

前端 vue 解决按1920*1080设计图做的页面适配屏幕缩放并适配4K屏相关推荐

Ubuntu18.04调整屏幕分辨率至1920*1080
Ubuntu18.04调整屏幕分辨率至1920*1080 文章目录 Ubuntu18.04调整屏幕分辨率至1920*1080 前言: 参考链接: 详细步骤: 前言: 当服务器插上了小分辨率的显示器之后 ...
笔记本高分屏字体模糊_笔记本win8系统设置1920*1080高分屏后字体模糊的解决方法...
有不少笔记本win8系统用户将电脑屏幕分辨率设置为1920*1080高分屏之后,发现一些第三方应用字体模糊的问题,遇到这样的问题该怎么办呢,现在给大家分享一下笔记本win8系统设置1920*1080高 ...
webpack+vue解决前端跨域问题
webpack+vue解决前端跨域问题参考文章: (1)webpack+vue解决前端跨域问题 (2)https://www.cnblogs.com/wei-dong/p/10689072.html ...
关于centOS无法识别1920*1080分辨率的解决方法
转自个人博客:http://siukwan.sinaapp.com/?p=616 安装了centOS后,发现display选项里面只有1024*768和800*600的选项,而显示屏是1920*108 ...
前端vue js 高德地图实现雷达扫描加载，借鉴百度地图等方法，采用Canvas解决雷达背景透明度问题，解决Canvas动态指针扫描造成浏览器卡顿问题
前端vue js 高德地图实现雷达扫描加载,借鉴百度地图等方法,采用Canvas解决雷达背景透明度问题,解决Canvas动态指针扫描造成浏览器卡顿问题经过3天的尝试,借鉴了好几个博客的思路,开发了一 ...
解决1920 * 1080笔记本字体模糊问题
解决1920 * 1080笔记本字体模糊问题字体模糊是因为分辨率缩放比不能很好的将字体整数缩放. 那么应该怎么解决这个问题呢? 1920 * 1080台式电脑的缩放比为100% 但是如果笔记本用10 ...
web前端 vue、react、angular三大框架对比与jquery的对比
前端当前最火的三大框架当属vue.react以及angular了. 但是在做项目的时候,我们怎么去选择呢? 这里做一个比较,希望大家可以有一个比较清晰的认识. vue与react vue和react ...
常见的前端vue面试题
常见的前端vue面试题 1.请讲述下VUE的MVVM的理解? MVVM 是 Model-View-ViewModel的缩写,即将数据模型与数据表现层通过数据驱动进行分离,从而只需要关系数据模型的开发, ...
vscode中前端vue项目详解_web前端Vue项目实战-Music
上篇讲到vue的使用方法,今天这一篇介绍vue的实操,可以大家更加加固去学习web前端vue技术. 第一节 Music项目环境第一部分本届作业聊一聊React和Vue的区别老版本的项目环境如何创 ...

前端 vue 解决按1920*1080设计图做的页面适配屏幕缩放并适配4K屏