屏幕适配—在电脑默认推荐缩放比为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;
}
}