在考虑笔记本或者显示器默认设置125%或者150%缩放，导致布局错乱的解决方法

一、为什么会出现有这个问题？

因为现在很多14寸的笔记本，出厂默认就是150%的显示。导致很多时候我们的项目，自己开发的时候都是按照100%比例来开发的，上线了就会发现这个问题。

二、使用以下方法

vue项目util下新建js

1、文件名 `devicePixelRatio.js`

class DevicePixelRatio {constructor() {// this.flag = false;}// 获取系统类型_getSystem() {// let flag = false;var agent = navigator.userAgent.toLowerCase();//      var isMac = /macintosh|mac os x/i.test(navigator.userAgent);//     if(isMac) {//           return false;//     }// 现只针对windows处理，其它系统暂无该情况，如有，继续在此添加if (agent.indexOf('windows') >= 0) {return true;}}// 获取页面缩放比例// _getDevicePixelRatio() {//      let t = this;//    }// 监听方法兼容写法_addHandler(element, type, handler) {if (element.addEventListener) {element.addEventListener(type, handler, false);} else if (element.attachEvent) {element.attachEvent('on' + type, handler);} else {element['on' + type] = handler;}}// 校正浏览器缩放比例_correct() {let t = this;// 页面devicePixelRatio（设备像素比例）变化后，计算页面body标签zoom修改其大小，来抵消devicePixelRatio带来的变化。document.getElementsByTagName('body')[0].style.zoom = 1 / window.devicePixelRatio;}// 监听页面缩放_watch() {let t = this;t._addHandler(window, 'resize', function() { // 注意这个方法是解决全局有两个window.resize// 重新校正t._correct()})}// 初始化页面比例init() {let t = this;if (t._getSystem()) { // 判断设备，目前只在windows系统下校正浏览器缩放比例// 初始化页面校正浏览器缩放比例t._correct();// 开启监听页面缩放t._watch();}}
}
export default DevicePixelRatio;

2、全局导入 `App.vue`

<script>
import DevicePixelRatio from './util/devicePixelRatio'
export default {name: 'App',data() {return {}},created() {new DevicePixelRatio().init()}
}
</script>

3、刷新页面

发现不管怎么缩放，125%还是150%，页面都不会去缩放了，就不会出现错乱的问题了

注意事项：

没有做 mac 兼容

vue 适配屏幕分辨率，以及屏幕的缩放相关推荐

屏幕分辨率与屏幕尺寸关系
一.屏幕分辨率是指屏幕可显示的最高像素数目. 二.屏幕尺寸显而易见,是指其面积. 三.另外还有一个术语叫"点距",就是屏幕上像素与像素之间的距离,也就是代表单位面积内像素点数目的一 ...
2021年最全Android屏幕适配的度量单位px dp(dip) ppi dpi sp pt的区别(最详细，屏幕尺寸，屏幕分辨率，屏幕兼容，屏幕适配)
0 前言快乐李同学最新在学习Android屏幕适配相关的知识点,其中涉及到了很多Android屏幕适配相关概念和度量单位,但是快乐李同学掌握的相关知识不牢固,于是决定写出这两篇文章对这方面的知识点做 ...
屏幕分辨率、屏幕尺寸、屏幕像素、屏幕密度完全解析
在此做笔记方便查看: 原文见 :点击打开链接 http://www.chinaz.com/manage/2015/0902/441624.shtml 另:关于屏幕的适配:参考文章点击打开链接 http ...
C++获取屏幕分辨率（屏幕窗口大小），屏幕显示比例（DPI）几种方法
1.获取屏幕的分辨率的几种方 #include <Windows.h>#include <iostream> int main(void) {HWND hd = GetDesk ...
vr相关文章第一弹,屏幕分辨率和屏幕ppi的区别
AMD:全沉浸式虚拟现实需要16K的显示屏对不起,对于世界领先的4K VR头显我们要先泼点冷水对于以上两篇文章作一些评价,首先第二篇文章对于渲染能力的担忧确实让人揪心,硬件的性能的提升不是靠市场 ...
为什么计算机屏幕分辨率会,屏幕分辨率为什么调不了【解决方法】
我们都知道,电脑的运用如今在我们的生活中已经非常得普遍而且广泛了,它被广泛地运用在学习.工作.科学以及技术上.但是在平时使用电脑的过程中可能会有很多的问题.对于电脑新手来说,最常遇见的问题之一便是有时 ...
屏幕分辨率和屏幕尺寸之间的关系
虽然这是一个很基础的问题,但是大多数人都对其有不少误解. 首先说一下屏幕尺寸,通常描述屏幕尺寸我们会用英寸来表示,比如说iphone6sp的尺寸是5.5英寸,但是英寸其实是长度单位,1英寸=2.54厘 ...
Ubuntu设置屏幕分辨率及屏幕翻转
首发于:yuany3721的WordPress Version: Ubuntu 18.04.6 LTS 使用xrandr查看屏幕信息 $ xrandr Screen 0: minimum 320 x ...
【Android 应用开发】分析各种Android设备屏幕分辨率与适配 - 使用大量真实安卓设备采集真实数据统计
.主要是为了总结一下对这些概念有个直观的认识; . 作者 : 万境绝尘转载请注明出处 : http://blog.csdn.net/shulianghan/article/details/198 ...
android分辨率比例,选择点一：搞清楚分辨率与屏幕比例
02选择点一:搞清楚分辨率与屏幕比例 ·分辨率:数值越高屏幕细腻度越高显示分辨率(屏幕分辨率)是屏幕图像的精密度,是指显示器所能显示的像素有多少.由于屏幕上的点.线和面都是由像素组成的,显示器可显 ...

vue 适配屏幕分辨率，以及屏幕的缩放

一、为什么会出现有这个问题？

二、使用以下方法

1、文件名 `devicePixelRatio.js`

2、全局导入 `App.vue`

3、刷新页面

vue 适配屏幕分辨率，以及屏幕的缩放相关推荐

最新文章

热门文章

vue 适配屏幕分辨率，以及屏幕的缩放

一、为什么会出现有这个问题？

二、使用以下方法

1、文件名 devicePixelRatio.js

2、全局导入 App.vue

3、刷新页面

vue 适配屏幕分辨率，以及屏幕的缩放相关推荐

最新文章

热门文章

1、文件名 `devicePixelRatio.js`

2、全局导入 `App.vue`