vue,适配电脑不同分辨问题,适配比例为100%和125%分辨率导致页面样式错乱问题

本文主要是介绍vue,适配电脑不同分辨问题,适配比例为100%和125%分辨率导致页面样式错乱问题,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

第一步:

新建一个js文件,名字随便起,这里命名为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;

第二步

在app.vue或者其它全局的文件中引入并使用

import DevicePixelRatio from './utils/devicePixelRatio';
export default {name: "App",created() {new DevicePixelRatio().init();}
};

他基本是固定了关于vue项目的显示,不管是屏幕显示比例还是浏览器显示比例改变,项目的显示都不会受到影响,但是其他外部嵌入页面依然会随显示比例的改变而改变。

这篇关于vue,适配电脑不同分辨问题,适配比例为100%和125%分辨率导致页面样式错乱问题的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/552876

相关文章

在React中引入Tailwind CSS的完整指南

《在React中引入TailwindCSS的完整指南》在现代前端开发中,使用UI库可以显著提高开发效率,TailwindCSS是一个功能类优先的CSS框架,本文将详细介绍如何在Reac... 目录前言一、Tailwind css 简介二、创建 React 项目使用 Create React App 创建项目

vue使用docxtemplater导出word

《vue使用docxtemplater导出word》docxtemplater是一种邮件合并工具,以编程方式使用并处理条件、循环,并且可以扩展以插入任何内容,下面我们来看看如何使用docxtempl... 目录docxtemplatervue使用docxtemplater导出word安装常用语法 封装导出方

springboot循环依赖问题案例代码及解决办法

《springboot循环依赖问题案例代码及解决办法》在SpringBoot中,如果两个或多个Bean之间存在循环依赖(即BeanA依赖BeanB,而BeanB又依赖BeanA),会导致Spring的... 目录1. 什么是循环依赖?2. 循环依赖的场景案例3. 解决循环依赖的常见方法方法 1:使用 @La

分辨率三兄弟LPI、DPI 和 PPI有什么区别? 搞清分辨率的那些事儿

《分辨率三兄弟LPI、DPI和PPI有什么区别?搞清分辨率的那些事儿》分辨率这个东西,真的是让人又爱又恨,为了搞清楚它,我可是翻阅了不少资料,最后发现“小7的背包”的解释最让我茅塞顿开,于是,我... 在谈到分辨率时,我们经常会遇到三个相似的缩写:PPI、DPI 和 LPI。虽然它们看起来差不多,但实际应用

SpringBoot启动报错的11个高频问题排查与解决终极指南

《SpringBoot启动报错的11个高频问题排查与解决终极指南》这篇文章主要为大家详细介绍了SpringBoot启动报错的11个高频问题的排查与解决,文中的示例代码讲解详细,感兴趣的小伙伴可以了解一... 目录1. 依赖冲突:NoSuchMethodError 的终极解法2. Bean注入失败:No qu

MySQL新增字段后Java实体未更新的潜在问题与解决方案

《MySQL新增字段后Java实体未更新的潜在问题与解决方案》在Java+MySQL的开发中,我们通常使用ORM框架来映射数据库表与Java对象,但有时候,数据库表结构变更(如新增字段)后,开发人员可... 目录引言1. 问题背景:数据库与 Java 实体不同步1.1 常见场景1.2 示例代码2. 不同操作

Vue中组件之间传值的六种方式(完整版)

《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值(通过事件形式)方

MySQL中慢SQL优化的不同方式介绍

《MySQL中慢SQL优化的不同方式介绍》慢SQL的优化,主要从两个方面考虑,SQL语句本身的优化,以及数据库设计的优化,下面小编就来给大家介绍一下有哪些方式可以优化慢SQL吧... 目录避免不必要的列分页优化索引优化JOIN 的优化排序优化UNION 优化慢 SQL 的优化,主要从两个方面考虑,SQL 语

css中的 vertical-align与line-height作用详解

《css中的vertical-align与line-height作用详解》:本文主要介绍了CSS中的`vertical-align`和`line-height`属性,包括它们的作用、适用元素、属性值、常见使用场景、常见问题及解决方案,详细内容请阅读本文,希望能对你有所帮助... 目录vertical-ali

mss32.dll文件丢失怎么办? 电脑提示mss32.dll丢失的多种修复方法

《mss32.dll文件丢失怎么办?电脑提示mss32.dll丢失的多种修复方法》最近,很多电脑用户可能遇到了mss32.dll文件丢失的问题,导致一些应用程序无法正常启动,那么,如何修复这个问题呢... 在电脑常年累月的使用过程中,偶尔会遇到一些问题令人头疼。像是某个程序尝试运行时,系统突然弹出一个错误提