vue项目适配屏幕分辨率与屏幕的缩放适配详细教程
笔记本或者显示器 默认设置125%或者150%缩放,导致布局错乱的解决方法
现在很多14寸的笔记本,出厂默认就是150%的显示。导致很多时候我们的项目,自己开发的时候都是按照100%比例来开发的,上线了就会发现这个问题
解决方案
vue项目utils下新建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
<script> import DevicePixelRatio from './util/devicePixelRatio' export default { name: 'App', data() { return { } }, created() { new DevicePixelRatio().init() } } </script>
刷新页面
不管怎么缩放,125%还是150%,页面都不会去缩放了,就不会出现错乱的问题了
到此这篇关于vue项目屏幕分辨率与屏幕的缩放适配-教程的文章就介绍到这了,更多相关vue 屏幕分辨率内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
el-select如何获取当前选中的对象所有(item)数据
在开发业务场景中我们通常遇到一些奇怪的需求,下面这篇文章主要给大家介绍了关于el-select如何获取当前选中的对象所有(item)数据的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-11-11vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
这篇文章主要介绍了vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀的相关知识,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友参考下吧2018-06-06vue,angular,avalon这三种MVVM框架优缺点
本文给大家具体分析了下vue,angular,avalon这三种MVVM框架优缺点,十分的细致全面,有需要的小伙伴可以参考下2016-04-04
最新评论