屏幕适配

2024-07-10 21:27| 来源: 网络整理| 查看: 265

屏幕适配—在电脑默认推荐缩放比为125%或150%等情况下的浏览器100%显示的适配（适用大数据平台）

1.创建缩放适配DevicePixelRatio.js文件在_correct方法中进行限制。

/** * @author xingwu * @date 2022-06-10 * @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; let width = window.screen.width if(width == 1536 && window.devicePixelRatio == 1.25 || width == 1280 && window.devicePixelRatio == 1.5 ){ document.getElementsByTagName('body')[0].style.zoom = 1 / window.devicePixelRatio; } //页面devicePixelRatio（设备像素比例）变化后，计算页面body标签zoom修改其大小，来抵消devicePixelRatio带来的变化。 // document.getElementsByTagName('body')[0].style.zoom = 1 / window.devicePixelRatio; console.log(window.devicePixelRatio,width) } //监听页面缩放 _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.2.在要使用的页面中进行引入：

import DevicePixelRatio from '../../../../components/DevicePixelRatio.js';//放大缩小适配

3.在mounted中进行new操作：

mounted() { this.$nextTick(()=>{ //这个只是用来调用echarts的， this.mapEcharts(); }) new DevicePixelRatio().init();//适配放大缩小 },

缺陷：有可能会出现echarts在鼠标hover时，echarts标点偏移。解决方法：通过媒体查询修改html的样式。将zoom使用transform: scale(0.8)代替;transform-origin: 0px 0px;width: 125%;height: 125%;

@media screen and (max-width: 1280px){ /* CSS代码 */ html { font-size: 12px !important; transform: scale(0.8); transform-origin: 0px 0px; width: 125%; height: 125%; } } @media screen and (min-width: 1281px) and (max-width: 1365px) { /* CSS代码 */ html { font-size: 14px !important; transform: scale(0.8); transform-origin: 0px 0px; width: 125%; height: 125%; } .dataWatsh { .service-bottom-box { .title { padding-top: 1% !important; } } } } @media screen and (min-width: 1366px) and (max-width: 1440px) { /* CSS代码 */ html { font-size: 14px !important; transform: scale(0.8); transform-origin: 0px 0px; width: 125%; height: 125%; } } @media screen and (min-width: 1441px) and (max-width: 1500px) { /* CSS代码 */ html { font-size: 14px; transform: scale(0.8); transform-origin: 0px 0px; width: 125%; height: 125%; } } @media screen and (min-width: 1501px) and (max-width: 1536px) { /* CSS代码 */ html { font-size: 14px; transform: scale(0.8); transform-origin: 0px 0px; width: 125%; height: 125%; } } @media screen and (min-width: 1537px) and (max-width: 1919px) { /* CSS代码 */ html { font-size: 14px; transform: scale(0.8); transform-origin: 0px 0px; width: 125%; height: 125%; } .delayCount { position: relative; height: 81% !important; margin: 0 !important; align-items: center; } } @media screen and (min-width: 1920px) and (max-width: 2130px) { /* CSS代码 */ html { font-size: 16px !important; } }

【本文地址】

屏幕适配

屏幕适配

今日新闻

推荐新闻