github 地址：https://github.com/astak16/adaptorjs
大屏适配解决方案
做可视化大屏时，在适配屏幕上，有四种常用的解决方案：
根据屏幕尺寸随意缩放
- 适用场景：留白不可接受的情况下使用
- 优点：占满屏幕，美观
- 缺点：屏幕尺寸比和设计稿尺寸比不一致时，导致变形
固定大屏头部，内容部分自适应
- 适用场景：图表变形不可接受的情况下使用
- 优点：任意缩放，不会变形
缺点：在屏幕尺寸比和设计稿尺寸比不一致适，导致留白多
- 解决方案：留白部分放置背景图
左右图表固定，地图部分自适应
- 适用场景：地图和图表分开，地图部分占满屏幕，图表部分固定浮在地图上面
- 优点：占满屏幕，美观
缺点：
-
- 在小屏幕上，地图部分会太小，不够美观
-
- 在小屏幕上，图表的字也会太大，不够美观
-
水平缩放，垂直滚动/水平滚动，垂直缩放/水平滚动、垂直滚动
- 适用场景：在 pc 上使用，嵌入在其他系统中，左边（上边）有导航栏
- 优点：不会缩放
- 缺点：需要滚动才能看到全部内容
大屏适配技术方案
做个多个可视化大屏项目后，我们团队最终选择了第一种方案，也就是随意缩放
因为可视化大屏大部分情况是在大屏幕上显示，比如电视机，显示器等，这些屏幕的分辨率一般都是 16:9 我们的设计稿只需要按照 1920*1080 来设计就可以了
做缩放的技术，主要是 css 的 transform: scale，但是吧它会有 3 个问题：
- 地图上的点位会出现偏移/点击位置不准
- 使用到
overflow: scroll的地方，文本可能会出现模糊 - 在使用第三方组件时，比如下拉框等不会缩放
为了一劳永逸解决这些问题，决定造个轮子
核心代码
屏幕的宽高和设计稿的宽高比例，就是缩放比例，通过设置 transform: scale 就可以得到缩放效果
const realWidth = window.document.body.clientWidth;
const realHeight = window.document.body.clientHeight;
this.pageScale = {
y: realHeight / designHeight,
x: realWidth / designWidth,
};.xxx {
transform: scale(${this.pageScale.x}, ${this.pageScale.y});
}为什么 x 和 y 都要单独设置呢？
反过来想，如果这样设置 transform: scale(scale)，宽高都会缩放，也就变成了整体缩放
这会导致有留白的地方（方案二是用着这种方式）
所以我们需要单独设置 x 和 y，当某个方向的缩放比不为 1 时，就进行缩放，另一个方向的缩放比可以保持不变
点位偏移和文本模糊问题
在高清屏（dpr > 2）不会触发（类似 mac 的屏幕就不会有），更多是出现在普通屏幕上（dpr = 1）
造成这个主要原因是 height * transformY(-50%) 的结果不是整数，为什么会出现这种现象：浏览器将图层拆分到 GPU 以进行 3D 转换，非整数的像素偏移，使得 Chrome 在字体渲染的时候，不是那么精确
解决方案：
- 不使用
transformY(-50%) - 在设置
scale的dom上设置：transform-origin: 0 0;
参考链接：疑难杂症：运用 transform 导致文本模糊的现象探究
下拉框不能缩放
第三方组件的下拉框都脱离了文档流，一般都在 body 下，而 body 是不会缩放的
下拉框需要缩放，就需要额外设置
解决方案：
用 MutationObserver 去监听 dom 变化，当 dom 出现时动态设置 scale
提供参数 extraQuerySelectors，用于设置脱离文档流的 dom
scale/matrix
不同的图表，地图组件使用的缩放可能不一样，有些会用 scale，有些用 matrix
所以进行缩放时，尽量保持一致，避免不必要的 bug
提供参数 scaleType，用于设置缩放类型
使用
- 安装
npm i adaptive
# 或
yarn add adaptive
# 或
pnpm i adaptive- 引入
import Adaptive from "adaptive";- 快速使用
const adaptive = new Adaptive({ querySelector: "#app" });注意事项
要在 dom 加载完成后再初始化
react中使用
useEffect(() => {
const adaptive = new Adaptive({ querySelector: "#app" });
return () => {
adaptive.destroy();
};
}, []);vue中使用
let adaptive;
onMounted(() => {
adaptive = new Adaptive({ querySelector: "#app" });
});
onUnmounted(() => {
adaptive.destroy();
});- 参数说明
querySelector: string // 大屏根选择器，必选
extraQuerySelectors?: string[]; // 需要额外缩放的 dom 选择器，可选
designWidth?: number; // 设计稿宽度，可选，默认 1920
designHeight?: number; // 设计稿高度，可选，默认 1080
type?: ScaleType; // 缩放类型，可选，默认 scale最终实现效果
demo
git clone https://github.com/astak16/adaptorjs.git
cd adaptorjs
pnpm i
pnpm dev