When we scale the screen to adapt to some small-screen notebooks and optimize the display effect, we will do some adaptation processing, such as using transform's scale processing, or using devicePixelRatio to automatically handle scaling, but sometimes in the project When there is an echarts chart, the floating position on the echarts chart will be inaccurate
The pseudocode of the window.devicePixelRatio solution is as follows:
<template>
<div class="xxx" :style="{zoom: 1/zoom}">
</div>
</template>
<script>
export default {
name: 'App',
created () {
const devicePixelRatio = window.devicePixelRatio // 获取下载的缩放 125% -> 1.25 150% -> 1.5
if (devicePixelRatio !== 1) {
// 如果在笔记本中用IE浏览器打开 则弹出提示
if (!! window.ActiveXObject || 'ActiveXObject' in window) {
alert('您的设备对显示进行放大导致页面显示不完全,请调整后打开/或用其他浏览器')
} else {
const c = document.querySelector('body')
c.style.zoom = 1 / devicePixelRatio// 修改页面的缩放比例
}
}
}
}
</script>
How to solve this problem? It is because the developer directly enlarges the body. If only adding the zoom page to the body will cause the floating position of the echarts chart to be inaccurate. Therefore, adding zoom to the external container of echars will also cause the parent component of the chart to be used
. Just zoom in simultaneously.
Write a function to get the body zoom attribute in the utility function file such as utils:
// 获取当前body下的zoom的值
export const zoom = () => {
const zoom = document.getElementsByTagName('body')[0].style.zoom
return zoom
}
Components page:
import {
zoom } from '@/utils/toolsFuncxxxx'
export default {
components: {
},
data () {
return {
zoom: '1'
}
},
mounted () {
// 备注，如果只在body添加zoom缩放页面，会导致echarts图表的悬浮位置不准确, 故在echars外部容器添加zoom
// 由于挂载之后，才会有dom节点，所以最好在此时调用zoom()
this.$nextTick(() => {
this.setZoom()
window.addEventListener('resize', this.setZoom)
})
},
methods: {
setZoom () {
this.zoom = zoom()
}
} //methods
}
In this way, addEventListener can dynamically monitor the resize event of the window and then automatically adapt the size
2. Adjust according to the canvas element of the adjustment page
mounted () {
// 备注，如果只在body添加zoom缩放页面，会导致echarts图表的悬浮位置不准确, 故在echars外部容器添加zoom
// 由于挂载之后，才会有dom节点，所以最好在此时调用zoom()
this.$nextTick(() => {
this.setZoom()
window.addEventListener('resize', this.setZoom)
})
},
methods: {
setZoom () {
this.zoom = zoom()
// 处理缩放导致canvas定位异常
var size = window.screen.width / 1920
document.styleSheets[document.styleSheets.length - 1].insertRule('canvas {zoom: ' + 1 / size + '}')
document.styleSheets[document.styleSheets.length - 1].insertRule('canvas {transform: scale(' + size + ')}')
document.styleSheets[document.styleSheets.length - 1].insertRule('canvas {transform-origin: 0 0}')
}
}
Now it is popular to use the solution of 'postcss-px2rem' with 'px2rem-loader'. As the name implies, px2rem converts the basic px into rem to display the view content. I will write a special article about the use of this scheme later
For details, see another technical blog: About the method of adapting the page to different resolutions and sizes on the PC side under the Vue project