ES6语法解决现在笔记本屏幕设置为125% 150%导致页面缩放的问题
校正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%导致页面缩放的问题的更多相关文章
- Nginx下完美解决WordPress的伪静态 (wordpress 迁移后 导致 页面404)
直奔主题 如何设置WordPress在 Nginx下的伪静态 第一步:按照文章名为例,登陆后台按照箭头顺序修改固定连接,点击保存更改 第二步:登陆宝塔面板后台,按照文件路径 找到属于要配置域名的con ...
- .vue文件在webstorm中es6语法报错解决方法
1 语法支持es6设置 Preferences > Languages & Frameworks > JavaScript 把 Javascript Language versio ...
- WebStorm ES6 语法支持设置
ECMAScript 6是JavaScript语言的下一代标准,已经在2015年6月正式发布了.Mozilla公司将在这个标准的基础上,推出JavaScript 2.0.ES6的目标,是使得JavaS ...
- WebStorm ES6 语法支持设置和ES6语法的JS文件编译为ES5语法文件
ECMAScript 6是JavaScript语言的下一代标准,已经在2015年6月正式发布了.Mozilla公司将在这个标准的基础上,推出JavaScript 2.0.ES6的目标,是使得JavaS ...
- 如何在Pycharm设置ES6语法环境
首先 如果不进行相关设置就刚ES6 语法的话,会出现下面提示性错误(运行还是能正常出效果的): (let 飘红, 这只是其中之一, 其他语法也会飘红) 接着,就是解决问题: 首先打开设置: 接着找到下 ...
- 用js中的let等操作,要手动开启ECMAScript6(如果不设置,let等ES6语法会报错)
问题:idea默认没有开启ECMAScript6,需要进行设置:(如果不设置,let等ES6语法会报错)步骤: File | Settings | Languages & Frameworks ...
- 如何让浏览器支持ES6语法,步骤详细到小学生都能看懂!
为什么ES6会有兼容性问题? 由于广大用户使用的浏览器版本在发布的时候也许早于ES6的定稿和发布,而到了今天,我们在编程中如果使用了ES6的新特性,浏览器若没有更新版本,或者新版本中没有对ES6的特性 ...
- ES6语法知识
let/const(常用) let,const用于声明变量,用来替代老语法的var关键字,与var不同的是,let/const会创建一个块级作用域(通俗讲就是一个花括号内是一个新的作用域) 这里外部的 ...
- .Vue 文件 ES6 语法 webstorm 中的一个识别Bug
webstorm 2017 版本中即使安装了vue template file 设置了 js 语言为 es6 语法仍旧会出现识别不了划线的情况,苦寻很久,最后解决方式如下 <script typ ...
- es6语法错误
哇,今天折腾了好久解决了一个问题,记录一下. 错误: 解决方法:配置babel,将es6语法转换成es5语法 1. 全局安装babel: npm install babel-cli -g 2. 本地安 ...
随机推荐
- 题解:P6880 [JOI 2020 Final] オリンピックバス
一个比较重要的性质:反转的边要在最短路上才会有贡献. 我们可以先跑一遍最短路,记录下整颗最短路树,然后暴力的对每一条边进行判断,反转. 我们建正反图各两个,分别以 \(1\),\(n\) 为起点.\( ...
- ArkUI-X与Android桥接通信之方法回调
平台桥接用于客户端(ArkUI)和平台(Android或iOS)之间传递消息,即用于ArkUI与平台双向数据传递.ArkUI侧调用平台的方法.平台调用ArkUI侧的方法.本文主要介绍Android平台 ...
- Nginx采坑日记(后台响应ResponseEntity时,Nginx将部分数据过滤)
执行流程: 问题描述: 后台响应ResponseEntity时,Nginx将部分数据过滤了,导致Vue提示如下图,但是实际上已经代理成功并返回数据了. 原因: 官网说明:http://nginx.or ...
- 如何在FastAPI中打造一个既安全又灵活的权限管理系统?
title: 如何在FastAPI中打造一个既安全又灵活的权限管理系统? date: 2025/06/16 08:17:05 updated: 2025/06/16 08:17:05 author: ...
- A0-Z9
首位字母A-Z,第二位数字0-9,组流水号. 将字母转成ascii 码,拼接数字,组成一个三位数字. 将这个三位的数字+1,再把这个三位数前两位转回字母,重新拼接出字母+数字 REPORT zlyte ...
- AI大模型应用开发-用LangChain构建带Agen流程的RAG系统
随着大模型(LLM)能力越来越强,RAG(Retrieval Augmented Generation,检索增强生成)技术成为增强大模型知识准确性的关键手段. 通过检索实时数据.外部文档,模型能回答更 ...
- Ding!您有一份ChunJun实用指南,请查收
ChunJun是易用.稳定.高效的批流一体的数据集成框架,主要应用于大数据开发平台的数据同步/数据集成模块,使大数据开发人员可简洁.快速的完成数据同步任务开发,供企业数据业务使用. 本文主要整理Chu ...
- 使用 xUnit 快速编写 .NET 应用单元测试
前言 在当今快速迭代的软件开发环境中,单元测试已成为保障代码质量和项目可靠性的重要基石,通过验证程序最小单元(如函数.方法.类等)的独立行为,能够在开发阶段快速发现逻辑错误或边界条件问题.今天大姚将带 ...
- UFT textUtil object 解决奇怪问题
当页面元素定位出问题,可以用textUtil来解决
- ChatGPT学习之旅 (3) Prompt进阶用法
大家好,我是Edison. 上一篇:Hello Prompt 复习Prompt用法 还记得上一篇学到的黄金公式吗? 这里,我们先来复习一下,假如我们想要ChatGPT来扮演一个[私人营养师]为我们给出 ...