校正windows页面在系统进行缩放后导致页面被放大的问题,通常放大比例是125%、150%

/**
* @author huangjf
* @description 校正windows页面在系统进行缩放后导致页面被放大的问题,通常放大比例是125%、150%
* **/ 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;

使用

1、引进 devicePixelRatio.js

```js
import DevicePixelRatio from '@/api/dataValidation/base/devicePixelRatio.js';
```

2、进行DevicePixelRatio类的实例化

```js
created() {
new DevicePixelRatio().init();
}

ES6语法解决现在笔记本屏幕设置为125% 150%导致页面缩放的问题的更多相关文章

  1. Nginx下完美解决WordPress的伪静态 (wordpress 迁移后 导致 页面404)

    直奔主题 如何设置WordPress在 Nginx下的伪静态 第一步:按照文章名为例,登陆后台按照箭头顺序修改固定连接,点击保存更改 第二步:登陆宝塔面板后台,按照文件路径 找到属于要配置域名的con ...

  2. .vue文件在webstorm中es6语法报错解决方法

    1 语法支持es6设置 Preferences > Languages & Frameworks > JavaScript 把 Javascript Language versio ...

  3. WebStorm ES6 语法支持设置

    ECMAScript 6是JavaScript语言的下一代标准,已经在2015年6月正式发布了.Mozilla公司将在这个标准的基础上,推出JavaScript 2.0.ES6的目标,是使得JavaS ...

  4. WebStorm ES6 语法支持设置和ES6语法的JS文件编译为ES5语法文件

    ECMAScript 6是JavaScript语言的下一代标准,已经在2015年6月正式发布了.Mozilla公司将在这个标准的基础上,推出JavaScript 2.0.ES6的目标,是使得JavaS ...

  5. 如何在Pycharm设置ES6语法环境

    首先 如果不进行相关设置就刚ES6 语法的话,会出现下面提示性错误(运行还是能正常出效果的): (let 飘红, 这只是其中之一, 其他语法也会飘红) 接着,就是解决问题: 首先打开设置: 接着找到下 ...

  6. 用js中的let等操作,要手动开启ECMAScript6(如果不设置,let等ES6语法会报错)

    问题:idea默认没有开启ECMAScript6,需要进行设置:(如果不设置,let等ES6语法会报错)步骤: File | Settings | Languages & Frameworks ...

  7. 如何让浏览器支持ES6语法,步骤详细到小学生都能看懂!

    为什么ES6会有兼容性问题? 由于广大用户使用的浏览器版本在发布的时候也许早于ES6的定稿和发布,而到了今天,我们在编程中如果使用了ES6的新特性,浏览器若没有更新版本,或者新版本中没有对ES6的特性 ...

  8. ES6语法知识

    let/const(常用) let,const用于声明变量,用来替代老语法的var关键字,与var不同的是,let/const会创建一个块级作用域(通俗讲就是一个花括号内是一个新的作用域) 这里外部的 ...

  9. .Vue 文件 ES6 语法 webstorm 中的一个识别Bug

    webstorm 2017 版本中即使安装了vue template file 设置了 js 语言为 es6 语法仍旧会出现识别不了划线的情况,苦寻很久,最后解决方式如下 <script typ ...

  10. es6语法错误

    哇,今天折腾了好久解决了一个问题,记录一下. 错误: 解决方法:配置babel,将es6语法转换成es5语法 1. 全局安装babel: npm install babel-cli -g 2. 本地安 ...

随机推荐

  1. flutter3-deepseek流式AI模板|Flutter3.27+Dio+DeepSeeek聊天ai助手

    基于Flutter3+DeepSeek-V3+Markdown跨平台流式ai打字输出问答助手. flutter3-deepseek-chat跨平台ai流式实例,基于Flutter3.27+Dart3+ ...

  2. ShadowSql之表达式树

    ShadowSql的主要思想通过表和字段的影子来拼写sql .net中的表达式树是作为模型类的影子,非常契合ShadowSql 拿表达式树来拼写sql就和EF类似 一.nuget包 nuget安装Sh ...

  3. JVM 使用mat分析Dump文件排查大对象解决系统full GC问题

    摘要:介绍内存分析工具Mat查找大对象的使用方法,定位full GC根源,拉升系统吞吐量,避免内存泄漏. 引言   线上服务器频繁发生full GC,直接拉低系统吞吐量,甚至OOM.今天我们来一起学习 ...

  4. python 利用librosa库变声,声音变速

    wav文件可自定义,将wav文件放置在代码的同一目录下 文件要改名为gg. wav 声音变速: import librosa y,sr = librosa.load("gg.wav" ...

  5. C# 模式匹配全解:原理、用法与易错点

    引言 随着C#不断发展,"模式匹配"(Pattern Matching)已经成为让代码更加友好.可读和强大的核心特性.从 C# 7.0 初次引入,到 C# 11的能力扩展,模式匹配 ...

  6. Kubernetes控制器-Job和CronJob

    Job 和 CronJob Deployment, StatefuleSet以及DaemonSet这三个控制器主要编排的对象都是"在线业务",比如我们举例常用的Nginx,MySQ ...

  7. Android studio虚拟机黑屏

    1.冷启动 cold boot now 2.新建一个 另外今天下午起来的比较晚,就在宿舍上的机,然后效果就比较差,我有罪,我下次要学习一定不在宿舍,今晚也是早早的吃了饭就来自习了,这就是成果.卡了我一 ...

  8. 使用Logback实现不同微服务输出各自的日志文件

    找到logback-spring.xml配置文件,在里面使用如下配置 <!--定义策略日志文件的存储地址--><property name="logStrategy.pat ...

  9. ChatGPT学习之旅 (7) 参数化表达的魔力

    大家好,我是Edison. 上一篇:聊聊AI人设 通过人设模版可以有效给AI"洗脑",这体现的是结构化的表达.但想要AI实现精准控制多分支,实现千人千面的功能,就得使用参数化表达了 ...

  10. Layui 更新Table 表格内容的值

    $.ajax({ //请求方式 type: "POST", //请求地址 url: "/", //数据,json字符串 data: { }, //请求成功 su ...